我有一行我想在左側顯示影像，在右側顯示文本。我的影像應該與我的文字具有相同的高度。我的 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>
無論我嘗試什么，影像總是超過相鄰列的高度，從而增加了行的高度。有什么解決辦法嗎？
uj5u.com熱心網友回復：
背景影像解決方案。
@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>uj5u.com熱心網友回復：
你可以這樣試試。
HTML
<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 [email protected] 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/[email protected]/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
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/533795.html
上一篇：無法在.container-fluidbootstap5.2中將裝訂線設定為0
下一篇：排除引導程式容器的右邊距