图片自适应屏幕大小

有时候美工给过来的图片不规范，用户手机屏幕大小不一样。可能导致在不同的用户手机上显示效果不一样，这时候需要对图片的显示做自适应。

一把来说自适应可以根据需求，做成宽高固定显示屏幕大小。但对于一些长图可能出现图片被压缩在一个屏幕内导致长度变短。

如果做成宽度100%。长度自适应的话，当图片长度不够时可能出现留白。需要自己做出取舍。

下面只做宽度固定，长度自适应。可以放长图。

话不多说直接上代码：

只需要在div里嵌套一个img，这样能保证长图时屏幕可以滑动。

看下css的写法

width和height都为100%则图片显示的部分是铺满屏幕的。

top,left=0则从屏幕左上角开始

background-size的宽度设成100%保证图片铺满外面的div,长度auto则当长图时图片可以在div里下滑。

亲测有效。只需把img的src换成需要显示的图片的url即可。