Я сталкиваюсь со специфической проблемой c в bootstrap 4 при изменении высоты изображения. У меня есть ряд из четырех столбцов. 2-й и 3-й столбцы занимают по 5 столбцов. Во втором столбце есть изображение, а в третьем столбце - текстовое поле. Теперь проблема в том, что размер текста в третьем столбце может увеличиваться, и я хочу, чтобы высота изображения второго столбца соответствовала высоте третьего столбца, если текст в третьем столбце становится больше. Я даже пробовал использовать img-fluid из bootstrap 4, но это не работает. Вот мой пример кода. Также моя ссылка на jsfiddle JSFiddle Link
.meet-designer-tile{margin-top:80px;margin-bottom:40px;}
.collection-details .btn-collection-details{
border: none;
border-radius: 0;
padding: 15px 63px;
color: #41173F !important;
font-size: 14px;
line-height: 20px !important;
text-align: center;
margin-top: 20px;
text-decoration: none !important;
border: 1px solid black;
}
.collection-details .btn-collection-details:hover {
background-color: transparent !important;
}
.collection-details-spacing{
margin-top:200px;
}
.designerTileShadow{
box-shadow: 0 9px 20px 0 rgba(0,0,0,0.1);
}
.meet-designer-tile .content{
padding: 0px 40px;
}
.meet-designer-tile .designerPhoto{
padding-right: 0px;
}
.meet-designer-tile .content{
padding: 0px 40px;
}
/* Responsive Tablet */
@media(max-width:767px){
.meet-designer-tile .designerPhoto{
padding: 0px !important;
}
.meet-designer-tile .content{
padding:20px 20px 30px 20px;
}
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row d-flex flexrow">
<div class="col col-12 col-md-5 offset-md-1 designerPhoto">
<picture>
<source media="(max-width:767px)" srcset="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg" class="lazy designerTileShadow img-fluid"/>
<img src="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg" srcset="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg 2x" class="stretch object-fit designerTileShadow img-fluid"/>
</picture>
</div>
<div class="d-md-flex col-12 col-md-5 mt-md-0 justify-content-center align-items-center designerTileShadow pl-0">
<div class="content text-left">
<h5>MEET THE DESIGNER</h5>
<h2>Ali Samar</h2>
<p class="body-font">I am a designer.I am a designer.I am a designer.
I am a designer.I am a designer.I am a designer.I am a designer.
I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.
I am a designer.I am a designer.I am a designer.I am a designer.I am a designer.</p>
</div>
</div>
<div class="col col-12 col-md-1"></div>
</div>
</div>
Пожалуйста, помогите. Спасибо. Пчела