想要实现图片根据给定宽高来自适应缩放的时候，会想到什么属性？是object-fit: cover;吗？
来试一试！为了展示效果，我特地选了对称的图片。下面两个img元素都有一个div包裹，div设置固定宽高，第一个img标签宽高均100%，第二个img标签宽高均最小100%：
<!DOCTYPE html>
<html>
<head><title></title><meta name="referrer" content="never"><style type="text/css">*{margin: 0;padding: 0;border: none;overflow: hidden;}.img1,.img {width: 600px;height: 320px;margin: auto;}.img1 img{width: 100%;height: 100%;object-fit: cover;transition: .4s}.img1 img:hover{width: 125%;height: 125%;margin-left: -12.5%;margin-top: -12.5%;transform: rotate(-12deg);}.img{position: relative;overflow: hidden;;}.img img{position: relative;top: 50%;left: 50%;display: block;min-width: 100%;min-height: 100%;transform: translate(-50%,-50%);border-radius: 4px;transition: .4s}.img img:hover{min-width: 125%;min-height: 125%;transform: translate(-50%,-50%) rotate(-12deg);}</style>
</head>
<body><div class="img1"><img style="" src="https://img-blog.csdnimg.cn/20210703140200283.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTgyNTYy,size_16,color_FFFFFF,t_70#pic_center"></div><br><div class="img"><img style="" src="https://img-blog.csdnimg.cn/20210703140200283.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTgyNTYy,size_16,color_FFFFFF,t_70#pic_center"></div>
</div>
</body>
</html>
确实!object-fit: cover;工作良好。那有没有其他方式？看第二个img标签的样式！
从最终效果来看，第一种方案展示的内容更多！因为object-fit: cover;的裁剪是按照img标签宽高值中较大的值为基准的，将图片从中心按宽或高缩放至最大值后，再裁去多余部分后展示。
在第二种方案中，img标签的宽高就是图片的宽高。通过位移和坐标变换使其居中。这个方案有个弊端，就是图片实际宽高和我们想要展示的宽高差距过大时，展示的内容会非常少，只有中间一点点，而且hover缩放效果也没有了。所以应该使用第一种方案。
后续：在实际使用中，第二种方案体验明显更好。第一种在旋转变换的时候出现空白区域，且有抖动。第二种方案没有这个问题。如果只是缩放展示，第一种方案是首选；如果需要动画效果，第二种方案更加合适。
![[考研数学]概率论难点总结：样本标准差，样本均值，均值的期望和方差，与t分布、卡方分布和F分布的关系及推导](https://img-blog.csdnimg.cn/20201016120115461.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTkwMA==,size_16,color_FFFFFF,t_70#pic_center)
