图片自适应屏幕大小

半城伤御伤魂 提交于 2019-12-08 01:20:07

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

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

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

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

话不多说直接上代码:

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

看下css的写法

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

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

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

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!