How can I get an image in a Bootstrap column to sit tight against the viewport edge?-CodePudding

I'm using bootstrap and I'd like to get an image out of my container so that it hits the edges. I already tried with relative and absolute position but I can't find the trick. Can someone help me? Thanks in advance

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section id="about" >
  <div >
    <div >

      <div >
        <div >
          <h1 >About <span >us</span></h1>
          <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur distinctio ea iure modi nostrum rem sunt! Eligendi, laudantium, quis.</p>
          <p >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 >
          <img src="https://via.placeholder.com/800x300" alt="" >
        </div>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

There are quite a few ways to do this. A simple one, without messing up your layout too much, would simply be a negative margin applied with a custom class. We'll use the variable Bootstrap uses for the column padding, and we'll increase image size by the same amount to keep the left edge where it was.

Class name follows Bootstrap's convention of <descriptor>-<position>. We'll combine it with the fluid image class to achieve adequate specificity.

.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" >
  <div >
    <div >

      <div >
        <div >
          <h1 >About <span >us</span></h1>
          <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur distinctio ea iure modi nostrum rem sunt! Eligendi, laudantium, quis.</p>
          <p >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 >
          <img src="https://picsum.photos/1200/800?grayscale" alt="" >
        </div>
      </div>
    </div>
  </div>
</section>

Another strategy would be to apply the image as a background on a pseudo-element of the container. This cleans up the markup a bit, requiring only a little 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" >
  <div >
    <div >
      <div >
        <div >
          <h1 >About <span >us</span></h1>
          <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur distinctio ea iure modi nostrum rem sunt! Eligendi, laudantium, quis.</p>
          <p >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>