CSS设置class为c-i的div高度无效，如何解决？

核心原因 #

默认情况下，div容器的高度由内部内容（这里是图片）自动撑开，即使设置了height或max-height，如果没有约束内容溢出的规则，容器会优先跟随内容尺寸。

具体解决步骤 #

• 第一步：给.c-i添加溢出控制属性
  这是让max-height生效的关键，告诉容器当内容超出指定高度时该如何处理：

  .c-i {
    max-height: 300px; /* 替换成你需要的最大高度 */
    overflow: hidden; /* 超出部分直接隐藏，也可以用auto显示滚动条 */
  }
  

• 第二步：适配内部图片尺寸（可选但推荐）
  如果不想图片被生硬裁切，而是让图片自适应容器尺寸并保持比例，可以给图片加以下样式：

  .c-i img {
    width: 100%;
    max-height: 100%;
    object-fit: cover; /* 保持比例裁切超出部分，用contain则完整显示图片但可能留空白 */
  }
  

• 第三步：排查样式优先级冲突
  用浏览器F12开发者工具查看.c-i元素的样式面板，确认是否有其他高优先级规则（比如ID选择器、行内样式、带!important的规则）覆盖了你的max-height设置，如有则调整选择器权重或修改冲突规则。

完整示例代码 #

<div class="c-i">
  <img src="your-image-path.jpg" alt="图片描述">
</div>

.c-i {
  max-height: 280px;
  overflow: hidden;
  border: 1px solid #eee; /* 方便直观看到容器范围 */
}

.c-i img {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}

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