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

gtxyzz 首页 2022-08-01 688浏览 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: contain;}
　　
</style>
<div class="xxx">
　　<img src="xxx.jpg" />
</div>

完整实例