图片高度未按设置生效，如何强制将img元素高度设为400px？

方案一：用内联样式直接强制生效 #

内联样式优先级最高，能直接覆盖默认或其他CSS规则，同时让宽度自适应父容器：

<img
  src={url}
  alt=""
  className="object-fill rounded-tl-md"
  style={{ height: '400px', width: '100%' }}
/>

object-fill会保证图片内容填满容器，同时维持自身比例。

方案二：提升CSS类的优先级 #

如果习惯用类样式，就把选择器写得更具体，或者用优先级更高的规则：

/* 结合父容器类，提升优先级 */
.parent-div .object-fill {
  height: 400px;
  width: 100%;
}

/* 万不得已时用!important（尽量少用） */
.object-fill {
  height: 400px !important;
  width: 100%;
}

方案三：检查并调整父容器的尺寸限制 #

如果父div本身有高度限制（比如height: auto或max-height），会卡住图片高度。可以给父容器设固定高度：

.parent-div {
  height: 400px;
  overflow: hidden; /* 可选：防止图片超出容器 */
}

然后给img加占满容器的类（假设用Tailwind）：

<img
  src={url}
  alt=""
  className="object-fill rounded-tl-md w-full h-full"
/>

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