在div中图片等比例缩放，最小边撑满，不留空方案二使用img+object-fit（CSS3）

gtxyzz web技术 2022-08-01 683浏览 0

首先，准备两个原图：

在div中图片等比例缩放，最小边撑满，不留空方案二使用img+object-fit（CSS3）图一宽度为300px

在div中图片等比例缩放，最小边撑满，不留空方案二使用img+object-fit（CSS3）图二高度为300px

使用img+object-fit（CSS3）

在div中图片等比例缩放，最小边撑满，不留空

在css3中提供了一个object-fit，类似于background-size，

此方法必须浏览器支持css3或提供兼容。

<style type="text/css">
　　.xxx { width: 宽; height: 高; background: #f0f0f0; border: 2px solid #4CAF50;}
　　　　/*等比例缩放，最小边撑满，不留空*/
　　　　.xxx img { width: 100%; height: 100%; object-position: center center; object-fit: cover;}
</style>
<div class="xxx">
　　<img src="xxx.jpg" />
</div>