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

Question

编辑： 以下是三个截图，展示了我想要实现的目标：

所以基本上你可以看到大括号缩放以匹配内容的高度，随着浏览器变宽而减小。以上是可以使用Javascript（这是我截取的截图），但我希望有一个只有CSS的方法。 （结束编辑）

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

我尝试了各种各样的事情并阅读了人们似乎遇到同样问题的文章，但到目前为止，所提出的解决方案都没有奏效。我已经将它剥离到最基本的元素，并使用边框的照片在这里发布了所需的结构：

＆＃13;

＆＃13;

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

.img {
  flex: 1;
}

.img>img {
  height: 100%;
}

.text {
  flex: 2;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

无论我尝试过什么（大多数都涉及关闭弹性增长，或将高度设置为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("https://i.stack.imgur.com/yJDgT.png");
  background-position: right center;
}

.quote:after {
  background-image: url("https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/JGkT0.png">
  </div>
</div>

<div class="quote" style="max-width: 400px;">
  <div class="image left">
    <img src="https://i.stack.imgur.com/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="https://i.stack.imgur.com/JGkT0.png">
  </div>
</div>

Answer 2

这是一个不使用flexbox且只有一个div的解决方案。

你的div有两个背景，每个背景占宽度的25％。

文本的宽度为50％（100％减去两个背景的宽度），左侧和右侧的填充为25％。

只要您的背景图片长于文字，它就会起作用。

div {
  background: url('http://placeimg.com/400/800/nature'), url('http://placeimg.com/400/800/nature'); /* the two backgrounds */
  background-repeat: no-repeat, no-repeat; /* you don't want them to repeat */ 
  background-size: 25% auto, 25% auto; /* you set them to occupy 25% of the width and to keep the ratio for the height */
  background-position: top left, top right; /* you position on one the left, one on the right */
  width: 50%;
  padding:0 25%;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga mollitia libero recusandae aperiam soluta odit, laborum repellendus explicabo nemo, ea accusamus facilis, unde deleniti laudantium possimus repudiandae natus quas officiis.
  </div>