Question

我的布局左侧是图片，右侧是文字内容。我想要一个图像有100％的高度，我想保持图像宽高比。文本内容应填充可用宽度。

我尝试使用flex-box，但图像弹性项目不会将其宽度调整为图像大小：

.wrap {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.image-container {
  background-color: blue;
  flex: 0 0 auto;
}

img {
  height: 100%;
}

.content-container {
  background-color: green;
  flex: 1 1 0;
  overflow: auto;
}

<div class="wrap">
  <div class="image-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg/230px-Kitten_in_Rizal_Park%2C_Manila.jpg" />
  </div>
  <div class="content-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae interdum nunc. In nec semper lectus. Nunc et nisi mi. Integer lobortis lobortis fermentum. Pellentesque egestas, turpis eget rhoncus feugiat, massa elit euismod eros, et venenatis libero ex sed ipsum. Cras ut nisi eget erat hendrerit porttitor. Pellentesque mi elit, fringilla vel nulla eget, consequat iaculis ante. Maecenas rhoncus ante nec augue maximus tristique ac ut massa. Suspendisse sit amet mi nunc. Integer commodo nulla non sapien volutpat, non faucibus nunc scelerisque. Nullam nec venenatis ligula. Etiam ac molestie magna, et dictum nibh.
  </div>
</div>

如何增大/缩小图像容器弹性项目以适合图像大小？

Answer 1

一种方法是简单地擦除图像周围的DIV（无论如何，如果按照你想要的方式工作，你将看不到背景），这使得图像本身成为一个弹性项目，并将其留在默认设置：

.wrap {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


img {
  height: 100%;
  width: auto;
}

.content-container {
  background-color: green;
  overflow: auto;
}

<div class="wrap">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg/230px-Kitten_in_Rizal_Park%2C_Manila.jpg" />
  <div class="content-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae interdum nunc. In nec semper lectus. Nunc et nisi mi. Integer lobortis lobortis fermentum. Pellentesque egestas, turpis eget rhoncus feugiat, massa elit euismod eros, et venenatis libero ex sed ipsum. Cras ut nisi eget erat hendrerit porttitor. Pellentesque mi elit, fringilla vel nulla eget, consequat iaculis ante. Maecenas rhoncus ante nec augue maximus tristique ac ut massa. Suspendisse sit amet mi nunc. Integer commodo nulla non sapien volutpat, non faucibus nunc scelerisque. Nullam nec venenatis ligula. Etiam ac molestie magna, et dictum nibh.
  </div>
</div>

增大/缩小弹性项目以适合图像

1 个答案: