РЕДАКТИРОВАТЬ: вот три скриншота, показывающие, чего я пытаюсь достичь:
Таким образом, вы можете видеть масштаб фигурных скобок, соответствующий высоте содержимого, которая уменьшается по мере расширения браузера. Вышеупомянутое можно выполнить с помощью 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>Независимо от того, что я пробовал (большинство из них связано с отключением гибкого роста или установкой высоты на 100% или автоматически, изображение всегда пытается расти, а не сжиматься, чтобы соответствовать содержимому, поэтому я получаю очень негабаритный границы.
2 ответа
Предлагаю сделать это с помощью flexbox + background images.
- Сделайте трехколоночный макет с помощью flexbox, в примере используются псевдоэлементы.
- Используйте фоновые изображения для двух кавычек, ключ -
background-size: auto 100%;
.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;, чтобы контейнер мог рассчитать высоту на основе текстового содержимого.
.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>Вот решение без использования 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>
En Español