gtxyzz

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

gtxyzz web技术 2022-08-01 498浏览 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>


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

发表评论