添加时使 div 不必要地增长的图像答案

【问题标题】：Image making a div grow unnecessarily when added添加时使 div 不必要地增长的图像
【发布时间】：2022-12-14 21:33:20
【问题描述】：

我有一个垂直和水平居中的包装 div，然后它里面还有两个 div，旨在以 50/50 的比例共享包装的空间。当我将图像（“fireplace”）添加到最顶层的 div（“wall”）时，即使图像在分配的空间中应该没有问题，wall div 正在垂直扩展其高度并最终占用超过预期的空间包装中的空间量。这是 div 和相关图像的 CSS 代码：

.wrapper {
  display: grid;
  place-items: center;
  height: 85vh;
  width: 85vw;
}

#container {
  background-color: antiquewhite;
  z-index: 0;
  height: 100%;
  width: 100%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

#wall {
  background-color: darkred;
  z-index: 1;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.fireplace {
  height: 20vh;
  width: auto;
}

【问题讨论】：

标签： css

【解决方案1】：

将容器和墙壁的高度设置为 42.5vh（包装尺寸的一半）似乎可以解决此问题。

【讨论】：