CSS：如何动态调整图片宽高以适配指定div容器

你之前的问题出在给父容器设置了固定height:50%，导致不管图片实际高度如何，容器都会占据50%的高度，从而产生空白。只需调整父容器的高度属性，配合图片的自适应规则就能解决问题：

核心CSS代码 #

/* 父容器样式 */
.image-container {
  max-height: 50%;
  max-width: 100%;
  width: 100%;
  height: auto; /* 关键：让容器高度随图片内容自适应，而非强制占满50% */
}

/* 子图片样式 */
.image-container img {
  max-width: 100%;
  max-height: 100%;
  display: block; /* 消除图片默认的行内元素间距 */
}

效果说明 #

• 横向图片（高度未超过父容器max-height）：图片会触发max-width:100%，横向铺满容器，高度按比例自动缩放，此时父容器高度等于图片实际高度，不会出现多余空白。
• 纵向图片（高度超过父容器max-height）：图片会触发max-height:100%，高度被限制在50%，宽度按比例自动缩小，父容器高度随之保持在50%。

注意事项 #

如果父容器的上级元素没有设置明确高度，max-height:50%可能无法生效（百分比高度依赖父元素的高度基准）。例如容器直接放在页面中时，需要给html和body添加高度设置：

html, body {
  height: 100%;
  margin: 0;
}

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