设置图像的高度为列(Bootstrap)的大小



我有一行,我想在左边显示图像,在右边显示文本。我的图像应该和文字一样高。我的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&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;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>

你可以这样试试。

<div class="container my-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">1.2. Your access to and use of the Service is conditioned on your acceptance of and compliance with these Terms. These Terms apply to all photographers, visitors, users and others who access and/or use the Service.
1.3. By accessing or using the Service, whether as a photographer, visitor or user of the Website, you agree to be bound by these Terms. These Terms serve to protect and safeguard your rights, the rights of other users, our rights and the rights of third parties in the course of operating the Website. If you do not agree to the terms of use, you must immediately stop using any part of the Service.
1.4. We reserve the right to change or adapt these Terms at any time and without giving reasons with effect for the future. You will be notified of these changes at least two weeks before they take effect by posting them on the Website and should you have created a user account on our Website by notifying your registered e-mail address. You have the right to immediately cancel and terminate your account on our Website if you do not agree to the changes to the Terms. Changes shall be deemed approved by you if you continue to use the Service after the new Terms come into effect.
1.5. The use of the Service is subject to the Terms in force at the time of use.
2. Accounts and Registration
2.1. You have the option of creating a user account on our Website so that you can use the additional functions of the Website, in particular for uploading photos and other Content or for participating in any contests made available through the Service. The opening of a user account can only take place with the agreement to these Terms.
2.2. Upon registration, Pexels and you enter into a contract for the use of the Website and the Services. There is no claim to the conclusion of this contract. Pexels is entitled to refuse your registration without giving reasons.
2.3. You may only register with Pexels if you are 18 years of age or if you act with the consent of your parents or guardian to register under these Terms. Pexels reserves the right to verify the consent of your parents or guardian. Therefore, you must provide an e-mail address of your parents or guardian when you register, so that we can obtain a declaration of consent from your parents or guardian.
2.4. When you create an account with us, you must provide us with the information and data requested by Pexels that is accurate, complete, and current at all times. If your data changes after registration, you are obliged to correct the information in your account immediately.
2.5. You may not use as a username the name of another person or entity or that is not lawfully available for use, a name or trademark that is subject to any rights of another person or entity other than you without authorization, or a name that is otherwise offensive, vulgar or obscene.
2.6. You are responsible for safeguarding the password that you use to access the Service and for any activities or actions under your password, whether your password is with our Service or a third-party service. If you are not responsible for the misuse of your member account, you are not liable. You agree not to disclose your password to any third party. You must notify us immediately at info@pexels.com upon becoming aware of any breach of security or unauthorized use of your account.</p>
<p style="text-align: justify !important">text...</p>
</div>
</div>
<div class="col-12 col-lg-6">
<img class="img-fluid" src="https://images.pexels.com/photos/8342074/pexels-photo-8342074.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" alt="Participation" />
</div>
</div>
</div>

CSS

@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css);
@media (min-width: 768px) {
.my-container .row div[class*="col-"] {
display: flex;
flex-direction: column;
}
.my-container .row div[class*="col-"] .text-start,
.my-container .row div[class*="col-"] img {
flex: 1;
}
}
.my-container .row div[class*="col-"] img {
object-fit: cover;
}

图片来源:pixels.com

最新更新