在div中图片等比例缩放，最小边撑满，不留空方案一使用background

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

首先，准备两个原图：

在div中图片等比例缩放，最小边撑满，不留空方案一使用background 图一宽度为300px

在div中图片等比例缩放，最小边撑满，不留空方案一使用background 图二高度为300px

等比例缩放，最小边撑满，不留空

<style type="text/css">
　　#xxx { width: 任意宽; height: 任意高; background: #f0f0f0;border: 2px solid #4CAF50; }.
　　　　/*等比例缩放，最小边撑满，不留空*/
　　　　#xxbg1 { width: 100%; height: 100%; background: url('xxx.jpg') center center no-repeat; background-size: cover; }
</style>
<div id="xxx" >
<div id="xxbg1">      
</div>
</div>
<div id="xxx" >
<div id="xxbg2">      
</div>
</div>

完整实例

转载请注明：IT运维空间 » web技术 » 在div中图片等比例缩放，最小边撑满，不留空方案一使用background