为何object-fit: fill未拉伸图片？需匹配容器尺寸而非裁剪

问题原因 #

你的代码中object-fit: fill未生效，大概率是因为全局CSS（比如重置样式、框架默认样式）给<img>标签设置了max-width: 100%和height: auto，这两个属性会强制图片保持原有宽高比，直接覆盖了你设置的固定height值，导致图片无法拉伸。

解决方案 #

方案1：清除全局样式干扰 #

在.fill类中添加样式，覆盖全局限制：

.fill {
  object-fit: fill;
  height: inherit; /* 强制继承元素的固定高度，覆盖height:auto */
  max-width: none; /* 取消最大宽度限制，允许图片超出原尺寸 */
}

方案2：直接让图片填满容器 #

不需要依赖object-fit，直接设置图片宽高为元素的100%：

.fill {
  width: 100%;
  height: 100%;
  /* 默认行为就是拉伸填满，无需额外设置object-fit */
}

方案3：改用背景图实现 #

如果上述方法仍有问题，可将图片作为背景图使用：

.image-box {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin: 10px 0;
  background-image: url('https://placehold.co/800x1000');
  background-size: 100% 100%; /* 强制拉伸填满容器 */
  background-repeat: no-repeat;
}

.image-box.narrow {
  width: 100px;
  height: 150px;
}

对应HTML修改为：

<h2>背景图拉伸效果</h2>
<div class='image-box'></div>
<div class='image-box narrow'></div>

补充说明 #

object-fit: fill本身的设计就是让图片拉伸填满容器，但前提是没有其他CSS属性（比如height:auto、max-width）限制图片的尺寸。只要清除这些干扰，就能实现你需要的精确拉伸效果。

内容的提问来源于stack exchange，提问作者Sidharth Bajpai