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),它们内部都有对图片自适应的处理,可以直接使用。