我正在使用引導程式，我想從我的容器中獲取一個影像，以便它到達邊緣。我已經嘗試過相對和絕對位置，但我找不到訣竅。有人能幫我嗎？提前致謝
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section id="about" class="about">
<div class="container-fluid py-3 py-md-0">
<div class="row">
<div class="col-6">
<div class="about__content d-flex h-100 flex-column justify-content-center text-white">
<h1 class="text-uppercase fw-bold mb-md-4">About <span class="text-primary">us</span></h1>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur distinctio ea iure modi nostrum rem sunt! Eligendi, laudantium, quis.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus autem deserunt doloribus earum, in maiores minus modi natus non provident qui quos reiciendis soluta veniam voluptas voluptatibus? Aut, culpa.</p>
</div>
</div>
<div class="col-6">
<div class="about__image">
<img src="https://via.placeholder.com/800x300" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</section>uj5u.com熱心網友回復：
有很多方法可以做到這一點。一個簡單的，不會過多地弄亂你的布局，只是一個自定義類應用的負邊距。我們將使用 Bootstrap 用于列填充的變數，并將影像大小增加相同的量以保持左邊緣在原處。
類名遵循 Bootstrap 的<descriptor>-<position>. 我們將把它與流體影像類結合起來以達到足夠的特異性。
.img-fluid.shifted-end {
margin-right: calc(- var(--bs-gutter-x) * .5);
max-width: calc(100% var(--bs-gutter-x) * .5);
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section id="about" class="about">
<div class="container-fluid py-3 py-md-0">
<div class="row">
<div class="col-6">
<div class="about__content d-flex h-100 flex-column justify-content-center text-white">
<h1 class="text-uppercase fw-bold mb-md-4">About <span class="text-primary">us</span></h1>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur distinctio ea iure modi nostrum rem sunt! Eligendi, laudantium, quis.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus autem deserunt doloribus earum, in maiores minus modi natus non provident qui quos reiciendis soluta veniam voluptas voluptatibus? Aut, culpa.</p>
</div>
</div>
<div class="col-6">
<div class="about__image">
<img src="https://picsum.photos/1200/800?grayscale" alt="" class="img-fluid shifted-end">
</div>
</div>
</div>
</div>
</section>另一種策略是將影像作為背景應用到容器的偽元素上。這稍微清理了標記，只需要一點 CSS。
.bg-custom {
position: relative;
overflow: hidden;
}
.bg-custom:after {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
background-image: url('https://picsum.photos/1200/300?grayscale');
background-position: left center;
background-size: cover;
background-repeat: no-repeat;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section id="about" class="about">
<div class="container-fluid py-3 py-md-0 bg-custom">
<div class="row">
<div class="col-6">
<div class="about__content d-flex h-100 flex-column justify-content-center text-white">
<h1 class="text-uppercase fw-bold mb-md-4">About <span class="text-primary">us</span></h1>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur distinctio ea iure modi nostrum rem sunt! Eligendi, laudantium, quis.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus autem deserunt doloribus earum, in maiores minus modi natus non provident qui quos reiciendis soluta veniam voluptas voluptatibus? Aut, culpa.</p>
</div>
</div>
</div>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/484788.html
下一篇：DateTime::__construct()：無法在位置20(:)決議時間字串（2022年5月5日12:00:00:AM）：意外字符