我有一行,我想在左边显示图像,在右边显示文本。我的图像应该和文字一样高。我的html看起来像这样:
<div class="container pt-3">
<div class="row pt-5 pb-5">
<div class="col-12 col-lg-6 order-lg-last">
<div class="text-start">
<h1 class="mx-auto mb-2">title...</h1>
<p style="text-align: justify !important">text...</p>
<p style="text-align: justify !important">text...</p>
</div>
</div>
<div class="col-12 col-lg-6">
<img
class="img-fluid"
src="../../../assets/img/participation.png"
alt="Participation"
/>
</div>
</div>
</div>
无论我如何尝试,图像总是超过相邻列的高度,从而增加了行高度。有解决办法吗?
background-image solution
@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css);
.imgPlaceholder {
position: relative;
}
.imgPlaceholder::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(https://images.pexels.com/photos/14297669/pexels-photo-14297669.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
@media screen and (max-width: 991px){
.wrapper {
display: grid !important;
grid-auto-rows: 1fr;
}
.imgPlaceholder::before {
background-position: left;
}
}
<div class="container pt-3">
<div class="row mt-5 mb-5 justify-content-lg-end gx-0 wrapper row-cols-lg-2">
<div class="col col-lg-6 order-lg-last ">
<div class="text-start">
<h1 class="mx-auto mb-2">title...</h1>
<p style="text-align: justify !important">text...</p>
<p style="text-align: justify !important">text...</p>
</div>
</div>
<div class="col col-12 col-lg-6 imgPlaceholder"></div>
</div>
</div>
你可以这样试试。