РЕДАКТИРОВАТЬ: вот три скриншота, показывающие, чего я пытаюсь достичь:
Таким образом, вы можете видеть масштаб фигурных скобок в соответствии с высотой содержимого, которая уменьшается по мере расширения браузера. Вышеупомянутое выполнимо с помощью Javascript (именно так я сделал скриншоты), но я надеялся, что к этому можно применить только CSS. (КОНЕЦ РЕДАКТИРОВАНИЯ)
У меня есть гибкий горизонтальный макет 1: 2: 1, где у меня есть изображение левой границы в 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% или автоматически, изображение всегда пытается увеличиваться, а не сжиматься, чтобы соответствовать содержимому, поэтому я получаю слишком большой размер границы.
