点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
关于用样式来处理图片自适应的问题，下面分析一下两种法。
方法一，背景图
有一个做法，大家都很熟悉，图片作为div的背景。然后，应用background-size和background-position这两属性，就能很方便地按比例来缩放。
在响应式的环境下展示图片，平时一般都这么搞。
如下代码：
主要注意background-size的取值，可以是固定值，也可以是百分比，更可以是cover，contain。
1、若取值cover
其定义就是：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。（图片同比缩放、塞满整个容器，而图片多余的部分则被剪掉了）如下图：
2、若取值contain
其定义就是：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（图片同比缩放至图片能完全显示在容器中，多余空间留白），如下图：
上面将图片设置成背景的方法，不好的地方是你无法设置图片的懒加载、图片无法被搜索引擎或者其他类似的工具抓取到。然而，再现了方法二。
方法二，图片源
有一个属性叫object-fit，直接可以让图片自适应布局。
先看一下它的兼容性吧
咋一看，也不很很差，最少移动端还是基本可以兼容的。这个属性有几个常用的取值：
1、fill（填充）
替换内容拉伸填满整个content box, 不保证保持原有的比例。
2、contain（包含）
保持原有尺寸比例，效果图与background-size:contain对应的。
3、cover（覆盖）
宽度和高度至少有一个和容器一致。效果图与background-size:cover对应的
4、none
保持原有尺寸比例。
我做了一张完整的图，大家对比看一下：
最后总结：
出于性能和其它因素考虑，建议大家可以多关注和使用方法二，方法一是出现的比较早的方法，也是常用方式。
閱讀更多 小鄭搞碼事 的文章
