max-width属性让图片兼容手机屏幕

在写网页时,不可避免的在页面中添加图片元素,也就是img标签。当图片超过屏幕大小时,就会溢出(超出屏幕的宽度,或被隐藏或出现横向滚动条)。如果直接设置width为100%那么小图片也会撑大的,这就很难看了。

其实img还有一个max-width属性,就是解决这种问题的,可以设置最大宽度不超过max-width所指定的值来避免溢出。

img {
    max-width: 100%;
}

以上css实现图片大小超出屏幕时,就按屏幕的大小来显示。这种适合在手机端,毕竟谁也不愿意在手机端横向滚动。

本博客采用 知识共享署名-禁止演绎 4.0 国际许可协议 进行许可

本文标题:max-width属性让图片兼容手机屏幕

本文地址:https://dev-tang.com/post/2017/12/picture-max-width-compatible-with-mobile-screen.html

推荐阅读