html - Flexbox 使图像调整大小以匹配文本高度

Question

编辑:以下是三个屏幕截图，显示了我正在努力实现的目标:

所以基本上你可以看到大括号缩放以匹配内容的高度，随着浏览器变宽，它会减小。上面的代码可以用 Javascript 实现(我就是这样截屏的)，但我希望有一个纯 CSS 的方法。(结束编辑)

我有一个 1:2:1 的 flex 水平布局，其中我在一个 div 中有一个左边框图像，然后在一个 div 中有一些文本内容，然后在一个 div 中有一个右边框图像。边框图像通常比内容高很多，我试图让它们缩小，以便它们的高度始终与文本内容的高度相匹配。

我已经尝试了多种方法并通读了人们似乎遇到相同问题但迄今为止所建议的解决方案均未奏效的文章。我已将其简化为最基本的元素，并在此处使用边框的库存照片发布了所需的结构:

.parent {
  display: flex;
  max-width: 800px;
}

.img {
  flex: 1;
}

.img>img {
  height: 100%;
}

.text {
  flex: 2;
}

<div class='parent'>
  <div class='img' style='text-align:right'>
    <img src="https://media.istockphoto.com/photos/stack-of-colorful-books-left-border-picture-id147704087">
  </div>
  <div class='text' style='text-align:center'>
    Hello<br />World!<br />How are you?
  </div>
  <div class='img' style='text-align:left'>
    <img src="https://media.istockphoto.com/photos/stack-of-colorful-books-left-border-picture-id147704087">
  </div>
</div>

无论我尝试过什么(其中大部分涉及关闭 flex-grow，或将高度设置为 100% 或自动，图像总是尝试增大而不是缩小以匹配内容，所以我最终得到边框过大。

Answer 1

我建议使用 flexbox + 背景图片。

• 使用 flexbox 制作三列布局，示例使用伪元素。
• 为两个引号使用背景图片，关键是 background-size: auto 100%;

codepen

.quote {
  display: flex;
  max-width: 800px;
  margin: 30px auto;
}

.quote:before,
.quote:after {
  content: "";
  flex: 0 0 25%;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.quote:before {
  background-image: url("/image/yJDgT.png");
  background-position: right center;
}

.quote:after {
  background-image: url("/image/JGkT0.png");
  background-position: left center;
}

.quote .text {
  flex: 0 0 50%;
  text-align: center;
}

<div class="quote">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

<div class="quote" style="max-width: 400px;">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

虽然，你仍然可以使用内联图片，关键是将img设置为position: absolute;，这样容器就可以根据文字内容。

codepen

.quote {
  display: flex;
  max-width: 800px;
  margin: 30px auto;
}

.quote .image {
  flex: 0 0 25%;
  position: relative;
}

.quote .image img {
  position: absolute;
  top: 0;
  height: 100%;
}

.quote .left img {
  right: 0;
}

.quote .right img {
  left: 0;
}

.quote .text {
  flex: 0 0 50%;
  text-align: center;
}

<div class="quote">
  <div class="image left">
    <img src="/image/yJDgT.png">
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="image right">
    <img src="/image/JGkT0.png">
  </div>
</div>

<div class="quote" style="max-width: 400px;">
  <div class="image left">
    <img src="/image/yJDgT.png">
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="image right">
    <img src="/image/JGkT0.png">
  </div>
</div>