gtxyzz

如何在div中让图片居中方案二使用img+object-fit(CSS3)

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

首先,准备两个原图:

如何在div中让图片居中方案二使用img+object-fit(CSS3)图一宽度为300px

如何在div中让图片居中方案二使用img+object-fit(CSS3)图二高度为300px

使用img+object-fit(CSS3)居中

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

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

<style type="text/css">
  .xxx { width: 宽; height: 高; background: #f0f0f0; }
    /*原图居中*/
    .xxx img { width: 100%; height: 100%; object-position: center center; object-fit: none; }
</style>
<div class="xxx">
  <img src="xxx.jpg" />
</div>


如何在div中让图片居中方案二使用img+object-fit(CSS3)
如何在div中让图片居中方案二使用img+object-fit(CSS3)

发表评论