响应式网站是需要根据不同的终端设备分辨率大小来自动适应排版，所以网页中的图片如何也做到自动适应缩放排版，并且不会出现混乱的局面，这就需要一些比较实用的技巧
技巧一：使用全屏宽度的图片
在banner横幅、广告、分割图片之类的地方，可以考虑使用全屏宽度的图片，高度设为自动auto，这样图片可以根据屏幕大小自动缩放而保持版面不出问题
技巧二：相同栏目下图片宽高比例要一致
为了仿制在自适应终端设备宽度的过程中，图片缩放的时候变形，所以响应式网站设计中一般图片的高度都会设为自动auto，不会定高度。所以相同栏目下保持同样的宽高比才能保证缩放的过程中，同一排的所有图片高度一致，这样才不会导致出现空行、错乱的问题产生。
技巧三：通过js计算图片的高度
如果是网站后期人员不太懂图片处理，不能保证每个栏目产品图片比例一致的话，就需要用js通过图片的宽度来计算出图片的高度然后赋值。这样做可以保证在后台上传的图片不是同一个宽高比也能正常的自适应，但是就会出现图片的压缩变形情况。
Send Email