如何实现图片适配容器并保持宽高比的特定覆盖效果

嘿，这个需求其实很简单，咱们直接上解决方案，顺便给你捋清楚原理：

首先先修正你代码里的小错误——HTML的闭合标签应该是</div>，不是<div/>哈。然后只需要给图片加几行CSS就能搞定你要的效果：

完整可运行代码 #

<style>
.container{ 
  width: 250px; 
  height: 250px; 
  background-color: red; 
  overflow: hidden; 
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 这是实现需求的核心属性 */
}
</style>

<div class="container">
  <img src="https://img-19.ccm2.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg" alt="img">
</div>

为啥这么写能满足你的需求？ #

• 先给图片设置width: 100%; height: 100%;，让它先占满容器的整个空间；
• 核心的object-fit: cover会帮你搞定比例问题：它会严格保持图片的原始宽高比，同时让图片完全覆盖容器。如果图片的比例和容器不一样（比如你说的2:1图片配1:1容器），浏览器会自动把超出容器的部分裁剪掉，不会让图片变形，也不会留下任何空隙——就像你描述的那样，会自动适配维度让容器被完全填满。

兼容老浏览器的替代方案 #

如果要兼容IE这种不支持object-fit的老浏览器，咱们可以换个思路，把图片作为容器的背景图：

.container{ 
  width: 250px; 
  height: 250px; 
  background-color: red; 
  background-image: url("你的图片地址");
  background-size: cover;
  background-position: center;
}

这种方式不需要内部的<img>标签，同样能实现全覆盖且保持比例的效果，兼容性拉满。

内容的提问来源于stack exchange，提问作者Yacine Benhenni