如何使 <img> 不影响 div 高度答案

【问题标题】：How can I make <img> not affect div height如何使 <img> 不影响 div 高度
【发布时间】：2019-08-11 11:25:00
【问题描述】：

我想让这个 div 容器内的图像在拉伸时不影响其容器大小，如果可能的话，我希望它在不设置容器高度或通过为位置指定负顶部或底部的情况下向上和底部移动。

.container {
  display: flex;
  background: skyblue;
  height: 300px;
  margin-top:50px;
}

img {
  position:relative;
  width: 500px;
  top:-30px;
}

.column1 {
  flex: 1;
}

.column2 {
  flex: 1;
}

<div class="container">
  <div class="column1">Hello world</div>
  <div class="column2">
    <img src="https://food.fnr.sndimg.com/content/dam/images/food/fullset/2013/6/28/0/FNK_Apple-Pie_s4x3.jpg.rend.hgtvcom.826.620.suffix/1382545039107.jpeg" alt="">
  </div>
</div>

所以基本上我想要的是图像不影响容器大小，当拉伸 div 的图像大小以保持不变时，它可以出去但没有像这样为 div 设置高度。

编辑：我想让图像不影响它的 div 大小（我可以用高度来做）但我也希望它不仅从底部覆盖，而且从 div 的顶部覆盖（就像现在一样，但是不使用 css 中的负顶部位置）

【问题讨论】：

但容器 div 将拉伸以适应 img，除非您为其指定 height。
对了，还有没有其他方法可以使用 flexbox？为了使它更具响应性，我怎样才能使它从上覆盖 div，而不仅仅是底部而不使用一些负位置？
那么，您希望容器div 的最终高度仅为.column1 文本中的height，而img 位于底部？
让我编辑这个 sn-p 来向你展示我真正想要的东西，但不是用那种方法（因为它是错误的）
是的，那太好了。

标签： html css

【解决方案1】：

有一种非常棒的方法可以让背景图像像 img 元素一样工作，从而自动调整其高度。您需要知道图像的宽高比。将容器的高度设置为 0，并根据图像比例将 padding-top 设置为百分比。

它将如下所示：

div {
  background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100 % ;
  height: 0;
  padding-top: 66.64 % ; /* (img-height / img-width * container-width) */
  /* (853 / 1280 * 100) */
}

【讨论】：

【解决方案2】：

您始终可以在图像上设置position: absolute; 以将其置于文档流之外，从而获得您想要的效果。

如果您不使用 flexbox，另一个选项是设置 float，这也会将图像带到文档流之外。

第三种选择是将height 设置为column2，使其不关心儿童身高。但这是一种 hack，我无法确认它是否适用于所有可能的浏览器。

.column2 {
  height: 1px;
}

另外请记住，通过这样做，图像将开始与容器 div 下方的元素重叠。

【讨论】：

是的，但是在调整大小并尝试使其响应时，位置：绝对做错了：/
hm ok，所以你要在文档流中保留图片，还要让它不影响背景？
所以嗯，我可以用绝对位置来做到这一点，并在 900px 以下时进行查询绝对不存在。这是好方法吗？