Question

大家好，我几周以来一直试图解决这个问题。我有一个自动高度容器，容器中的左侧div是自动高度，因为它内部可以有各种不同的内容。右边的div总是有图像，但我不知道图像的高度。

如何使图像不超过左侧内容的高度？

.container {
  float: left;
  width: 100%;
  height: auto;
  border: 2px solid black;
}

.leftContainer {
  float: left;
  width: 48%;
  border: 2px solid black;
}

.rightContainer {
  width: 50%;
  float: left;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="leftContainer">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="rightContainer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg">
  </div>
</div>

Answer 1

我会使用flex来创建布局并使用绝对位置使图像离开流程，因此它不会给它的容器一个高度，因此高度将等于左边的高度。然后只需调整图像的属性，使其适合您所需的容器：

＆＃13;

.container {
  display:flex;
  border: 2px solid black;
}

.leftContainer {
  flex:1;
  border: 2px solid black;
}

.rightContainer {
  flex:1;
  position:relative;
}

img {
  position:absolute;
  top:0;
  max-height:100%; /* Or height:100%*/
  max-width:100%;
  /*to center the image if needed*/
  left:50%;
  transform:translateX(-50%);
  /**/
}

＆＃13;

<div class="container">
  <div class="leftContainer">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="rightContainer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg">
  </div>
</div>

＆＃13;

另一种解决方案是使用与上面相同的布局并将图像作为背景。您将拥有相同的情况，因为没有内容，因此高度将与左列相同。然后使用背景属性调整图像位置/大小：

＆＃13;

.container {
  display: flex;
  border: 2px solid black;
}

.leftContainer {
  flex: 1;
  border: 2px solid black;
}

.rightContainer {
  flex: 1;
  position: relative;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg");
  background-size: contain; /* or cover or 100% 100% or auto*/
  background-position: top center;
  background-repeat:no-repeat;
}

＆＃13;

<div class="container">
  <div class="leftContainer">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="rightContainer">
  </div>
</div>

＆＃13;

Img自动高度div的高度

1 个答案: