如何使容器内图片与文本框宽度一致并正确适配显示？

首先，object-fit: cover 生效的核心前提是：图片必须有明确的宽高尺寸（要么直接给img设宽高，要么通过父容器的约束让img的宽高被确定），同时图片不能是纯inline元素。结合你的需求，大概率是以下某一个原因导致属性失效：

常见问题点及解决方法 #

• 图片未设置与文本div一致的宽高
  如果你的文本div有固定宽高，但img只设置了width: 100%却没设height: 100%，或者宽高没有和文本div对齐，object-fit就没有作用的基础。必须确保img的宽高和文本div完全一致，比如：

  .item-img, .item-text {
    width: 250px;
    height: 250px;
  }
  

• 图片是inline元素
  默认img是inline-block，但如果你的CSS里不小心把它改成了display: inline，object-fit会直接失效。给img加上display: block或者display: inline-block即可：

  .item-img {
    display: block;
    object-fit: cover;
  }
  

• 父容器的约束未传递给图片
  如果父容器用了flex/grid布局，但img没有设置width: 100%; height: 100%;来占满容器空间，图片会保持自身原始尺寸，object-fit自然无法生效。这种情况下要让img完全填充父容器：

  .item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

• 存在CSS样式冲突
  检查是否有其他CSS规则（比如带!important的样式）覆盖了img的宽高或object-fit属性，可以通过浏览器开发者工具查看元素的样式计算结果，确认object-fit: cover是否被正常应用。

完整示例代码 #

<div class="card-container">
  <img src="your-image-path.jpg" alt="示例图" class="card-img">
  <div class="card-text">这里是文本内容</div>
</div>

.card-container {
  display: flex;
  gap: 15px;
  padding: 20px;
}

.card-img, .card-text {
  width: 200px;
  height: 200px;
}

.card-img {
  display: block;
  object-fit: cover;
  /* 可选：去掉图片默认的间隙 */
  vertical-align: middle;
}

.card-text {
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者oemer ok