想要实现图片根据给定宽高来自适应缩放的时候，会想到什么属性？是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缩放效果也没有了。所以应该使用第一种方案。
后续：在实际使用中，第二种方案体验明显更好。第一种在旋转变换的时候出现空白区域，且有抖动。第二种方案没有这个问题。如果只是缩放展示，第一种方案是首选；如果需要动画效果，第二种方案更加合适。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #图片自适应缩放
