显示：flex 采用图像高度但在添加文本时溢出答案

【问题标题】：DIsplay: flex takes image height but overflows when text is added显示：flex 采用图像高度但在添加文本时溢出
【发布时间】：2021-12-09 06:52:45
【问题描述】：

我的display: flex 容器占用了我的图像高度，但是当我添加文本时，它会溢出图像。基本上检查员会获取图像的高度，但会忘记添加的文本。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.book-right-side {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.attraction-card {
  width: 100%;
  /* height: 100%; */
}

.book-right-side img {
  border-radius: 12px;
  height: 100%;
  width: 100%;
}

<div class="book-right-side">

  <div class="attraction-card">
    <h4>Beijing City</h4>
    <p>Teeest</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Beijing_montage.png" alt="Beijing City" />
  </div>


  <div class="attraction-card">
    <h4>Zhangjiajie Forest</h4>
    <p>Teeest</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Badaling_China_Great-Wall-of-China-04.jpg" alt="Zhangjiajie Forest" />
  </div>


  <div class="attraction-card">
    <h4>Great Wall of China</h4>
    <p>Teeest</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Badaling_China_Great-Wall-of-China-04.jpg" alt="Great Wall of China" />
  </div>


</div>

错误：

还有小提琴：https://jsfiddle.net/yqbcmvox/3/

【问题讨论】：

检查这是否与此问题重复 - image-max-height-100-inside-flexbox。如果是这样，也许检查这些答案。
是的，这是一个类似的问题，但答案没有帮助，仍然感谢您的尝试。我想我解决了我的问题，但我会留下这个问题，以防有人有好的答案。

标签： html css flexbox display

【解决方案1】：

我认为你应该在一个div中取h4和p标签，然后给那个div一个类，并使其成为一个绝对值，并使吸引力卡相对于那个绝对值，例如：

.text-box {
  position: absolute;
  top: 0;
  left: 0;
}

.attraction-card{
  width: 100%;
  /* height: 100%; */
  position: relative;
}

【讨论】：

感谢您的反馈，但我希望它们看起来像我的照片一样，我不希望将文字放在照片上。

【解决方案2】：

我想这会解决你的问题

.book-right-side {
      display: flex;
      gap: 1rem;
        width: 100%;
        overflow: hidden;
    }

【讨论】：

谢谢，但它会剪切图像，问题是我希望一切看起来都像我的照片，但我不明白为什么检查员没有得到正确的高度
我相信，这会隐藏部分图像（在底部），整个图像可能不可见。

【解决方案3】：

用<div> 标签包围<img> 标签。

这将确保图像不会超出父 flex div 的大小。

例子：

<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Badaling_China_Great-Wall-of-China-04.jpg" alt="Beijing City" />
</div>

对<img> 标记的所有 3 个实例执行此操作。

【讨论】：

是的，我找到了这个解决方案，另一个是给 .attraction-card 一个height: 100%，但我认为可能有更好的解决方案，因为它会缩短显示的图像和所有图像需要具有相同的尺寸才能很好地显示

【解决方案4】：

添加div标签来包裹图片并将高度设置为100%{height: 100%}。

我已经对其进行了测试，并且可以正常工作。我调整了相同高度和宽度的图像大小，并将它们托管在免费的在线托管图像上。

<div> <img src="https://i.ibb.co/F4qbx7V/great-wall-21.jpg"> </div>
<div> <img src="https://i.ibb.co/vZTJ9WN/Beijing-montage1.jpg"> </div>

另外，在您的.attraction-card 上添加一个height: 100%。如果不添加高度，图像看起来会被拉伸（如果你注意到的话）。

Codepen

【讨论】：

我只在.attraction-card 上使用了高度，它“解决”了问题，但谢谢！