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

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