Question

我想使此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大小（我可以用height做到），但我也希望它不仅从div的底部而且从顶部覆盖（就像现在但而不在CSS中使用负的顶部位置）

Answer 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) */
}

Answer 2

您始终可以在图像上设置position: absolute;，以将其带出文档流，这将达到您想要的效果。

如果您不使用flexbox，则将设置float，这也将使图像也脱离文档流。

第三个选择是将height设置为column2，以使其不关心孩子的身高。但这是一种黑客行为，我无法确定它是否可以在所有可能的浏览器上正常工作。

.column2 {
  height: 1px;
}

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

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

2 个答案: