我在引导4中遇到了一个特定问题，该问题是使图像高度响应。我有一排有四列。第二和第三列分别占据5列。第二列有图像，第三列是文本框。现在的问题是，第三列文字的大小可能会增加，并且如果第二列中的文字变得更多，我希望第二列的图像高度能够响应以等于第三列的高度。我什至尝试从引导程序4使用img-fluid，但它不起作用。这是我的示例代码。还有我到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>
请帮助。 谢谢。 蜜蜂
答案 0 :(得分：0)
我希望这可以为您提供帮助。对于移动版本，您可以通过媒体查询来强制设置高度。
.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;
}
}
picture img {
object-fit: cover;
}
picture {
height: 100%;
}
<!--
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 d-flex designerPhoto">
<picture class="d-flex">
<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.</p>
</div>
</div>
<div class="col col-12 col-md-1"></div>
</div>
</div>