携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情
前言
不知道大家会不会经常因为图片的适配而头疼，我经常苦恼于这个问题：如何合理地去裁剪图片，让父元素中的图片以规定的方式去展现。
本文将从aspect-ratio与object-fit出发，分别了解两个属性的特性，学习如何结合两个新CSS属性来解决
aspect-ratio
一般来说我们想要一张图片以固定的宽高比在不同的设备下让其显示得合理（也就是响应式）可以使用相对长度单位，直接设定width与heigth大小，并需要考虑到父元素的高宽设定，我们需要给父元素设定相同的宽度，但是这样并不优雅
而aspect-ratio的出现改变了这一现状，它可以一设永逸，官方文档给出该属性的解释为：为容器规定了一个期待的纵横比下面我们来直接对比两个设定方式的不同
如上面使用码上掘金展示的两种卡片，都事先设定好了容器宽度，第一种直接为图片设定宽高单位，第二种设定了aspect-ratio值为1/1，在这对比之下也就吐出了aspect-ratio的好处
object-fit
object-fit可以控制图片在容器中的显示形态，分别有：完全展开并保持原始比例，完全展开被拉伸铺满容器，铺满容器并保持原始比例但被裁剪。
我将父容器的宽度固定，图片的aspect-ratio属性设置为4/3，分别来看看三种不同情况的效果
- 当
object-fit的值为**contain**的时候，图片会根据自身比例完全展开，不会在意父容器的宽度，所以不会铺满。 - 值为
fill的时候，图片会完全展开铺满容器，但是会被拉伸，破坏掉原始的比例。 - 值为
cover的时候，图片会保持原始比例并铺满容器，但是溢出的部分会被裁剪。
总结
其最完美的结合就是使用aspect-ratio设定需求的宽度和高度比，再通过设定object-fit值为cover使图片保持原来的形态，且使每个图片都保持相同的宽高，图片的问题就这样迎刃而解了！get到知识的掘友给个三连吧~
