淘先锋技术网

首页 1 2 3 4 5 6 7

CSS 图片自适应应该算是前端开发中最常见的问题之一了,因为屏幕大小不一,不同设备、不同浏览器的排版又不同,所以如何让图片自适应屏幕就显得非常重要。

常见的 CSS 图片自适应有以下几种方式:

/* 宽度自适应 */
img {
max-width: 100%;
height: auto;
}

上面这段代码设置图片宽度最大不超过父容器,高度自动调整。这种方法对于百分比布局比较常见。

/* 高度自适应 */
img {
width: auto;
max-height: 100%;
}

这种方法跟前面的相反,宽度自动调整,高度最大不超过父容器。

/* 宽高均自适应,不变形 */
img {
width: 100%;
height: auto;
object-fit: cover;
}

这种方法可以让图片填充整个容器,同时不会变形。不过需要注意的是,IE 不支持 object-fit 属性,所以需要使用固定高宽或者 JS 处理。

/* 宽高均自适应,有变形 */
img {
width: 100%;
height: 100%;
}

这种方法可以让图片宽高都自适应,但是会有变形。一般和 JS 搭配使用,实现类似裁剪的效果。

总结一下,以上方法都可以实现图片自适应,需要根据实际情况选择。当然,如果你使用的是一些 CSS 框架(比如 Bootstrap),它们内部都有对图片自适应的处理,可以直接使用。