如何让div与内部图片尺寸一致且不超出父容器？

• 需求：让.zoom容器（绑定点击事件）尺寸完全匹配内部图片，同时图片和容器不能超出父容器.container的范围；图片要在.container内尽可能占满空间、保持比例并居中。
• 现状问题：横图对应的水蓝色.zoom容器尺寸大于图片本身；调整后竖图又会出现底部溢出。
• 背景：无法控制图片的比例和大小，最外层容器尺寸由用户窗口决定。

修正后的代码 #

HTML（无需修改） #

<div style="height: 500px; display: flex; flex-direction: row; overflow: scroll; background-color: lightgray">
  <div class="container">
    <div class="zoom" onclick="log()">
      <img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG" />
    </div>
  </div>
  <div class="container">
    <div class="zoom" onclick="log()">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Eiffel_tower_at_dawn_horizontal.jpg" />
    </div>
  </div>
</div>

CSS（核心修改） #

.container {
  height: 100%;
  width: 50%;
  /* 用flex实现内部元素居中，同时限制最大尺寸 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-color: lightgreen;
}

.zoom {
  /* 去掉固定宽高，让容器自适应图片尺寸 */
  max-height: 100%;
  max-width: 100%;
  background-color: aqua;
  /* 确保容器紧密包裹图片 */
  display: inline-block;
}

img {
  /* 保持图片比例，占满容器且不溢出 */
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  /* 消除图片默认行内间距 */
  display: block;
}

JavaScript（无需修改） #

function log() {
  console.log("Click!");
}

关键修改说明 #

1. .container改为flex布局：通过justify-content: center和align-items: center让图片容器在父容器内居中，同时自动限制容器的最大尺寸不超出父容器边界。
2. 重置.zoom的宽高设置：删掉固定的height:100%和width:100%，仅保留max-height和max-width为100%，让容器完全贴合图片的实际显示尺寸，同时不会超出父容器范围。
3. 图片设为块级元素：display:block消除图片默认的底部留白，保证.zoom和图片完全对齐。

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