仅修改父div类名如何实现内部img按父容器尺寸等比例自适应缩放？

可行解决方案（仅需修改父div类名，无需改动img标签） #

你之前设置的object-contain等属性不生效，核心原因是object-fit、max-width这类控制图片缩放的属性需要直接作用在img这类替换元素上，加在父容器上默认不会生效。可以通过以下几种方案实现需求：

方案1：新增自定义父类关联控制img样式（通用所有项目）

你可以给父div新增一个自定义类，比如fit-img-container，然后在全局CSS中写入以下规则：

/* 父容器基础样式，保留你原有w-50的尺寸规则即可 */
.fit-img-container {
  /* 若需要固定父容器宽高比，可额外加aspect-ratio规则，比如aspect-ratio: 16/9; */
}
/* 后代选择器控制内部img，不需要修改img本身的属性 */
.fit-img-container img {
  /* 保持宽高比完全展示图片，不留裁剪，加!important覆盖img原有image-cover的规则 */
  object-fit: contain !important;
  /* 如果需要图片铺满父容器且不变形、允许裁剪边缘，换成object-fit: cover !important; */
}

修改后的HTML代码：

<div class="w-50 fit-img-container">
  <img src="" class="w-full h-full image-cover">
</div>

方案2：Tailwind CSS项目专用（无需额外写CSS代码）

如果你的项目使用Tailwind CSS框架，可以直接用Tailwind的任意值后代选择器类，仅修改父div类名即可：

<!-- 保持宽高比完全展示 -->
<div class="w-50 [&>img]:!object-contain">
  <img src="" class="w-full h-full image-cover">
</div>

<!-- 铺满父容器、允许裁剪边缘 -->
<div class="w-50 [&>img]:!object-cover">
  <img src="" class="w-full h-full image-cover">
</div>

方案3：固定比例图片适用场景

如果你的所有内部图片宽高比固定，不需要适配多比例图片，可以直接给父div设置和图片一致的宽高比，img的宽高100%自然不会变形：

<!-- 示例为4:3比例的图片适配，aspect-ratio的值和你的图片实际比例一致即可 -->
<div class="w-50 aspect-[4/3]">
  <img src="" class="w-full h-full image-cover">
</div>

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