如何解决 banner 图 width100% 在不同浏览器的宽度拉伸问题？

Question

把banner从设计稿中切下来，banner图高300，width占整个设计稿的100%，放在浏览器中就出现了浏览器的尺寸和和设计稿width不相等的情况，该怎么办呢？

Answer 1

如果只是为了让图片比例不失真，可以使用背景图片的形式来实现。否则只能定宽，不然设备的width你无法约束，而你仅仅约束了高度，必然会导致拉伸。

Answer 2

假设你的banner切图的宽度是200px，可以给banner图的父元素设置宽度为200px，给banner图的宽度设置成100%，这样banner图在浏览器中的宽度和切图的宽度就能保持一致。