有时候美工给过来的图片不规范,用户手机屏幕大小不一样。可能导致在不同的用户手机上显示效果不一样,这时候需要对图片的显示做自适应。
一把来说自适应可以根据需求,做成宽高固定显示屏幕大小。但对于一些长图可能出现图片被压缩在一个屏幕内导致长度变短。
如果做成宽度100%。长度自适应的话,当图片长度不够时可能出现留白。需要自己做出取舍。
下面只做宽度固定,长度自适应。可以放长图。
话不多说直接上代码:
只需要在div里嵌套一个img,这样能保证长图时屏幕可以滑动。
看下css的写法
width和height都为100%则图片显示的部分是铺满屏幕的。
top,left=0则从屏幕左上角开始
background-size的宽度设成100%保证图片铺满外面的div,长度auto则当长图时图片可以在div里下滑。
亲测有效。只需把img的src换成需要显示的图片的url即可。