HTML、CSS设计图像出格

发布于05月08日

我有以下设计，并希望使用Bootstrap实现它:

正如您所看到的，图像应该从第8个网格开始，一直到页面末尾，不同于网格布局，我已经用codesen创建了一个工作代码片段:

`https://codepen.io/zakarya-noori/pen/KKGQMJo`

以下是我的代码:

img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 600px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main>
  <div class="container py-5">
    <div class="row align-items-center">
      <div class="col-6">
        <h1>Right side text <br> and title</h1>
        <h1>Right side text <br> and title</h1>
        <h1>Right side text <br> and title</h1>
      </div>
      <div class="col"></div>
      <div class="col-5">
        <img src="https://images.unsplash.com/photo-1683339708262-b1208394ffec?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" alt="image">
      </div>
    </div>
  </div>
</main>

推荐答案

Bootstrap根据媒体查询设置最大宽度，然后使用Margance:AUTO将内容居中.您可以通过将右页边距设置为零，然后将装订宽度添加到图像的整体宽度来将图像推到边缘.我不得不增加.tainer规则的专用性，使其覆盖Bootstrap的默认设置.

img {
  display: block;
  object-fit: cover;
  width: calc(100% + var(--bs-gutter-x,.75rem));
  height: 600px;
}

main > .container {
  margin-right:0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main>
  <div class="container py-5">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <h1>Right side text <br> and title</h1>
        <h1>Right side text <br> and title</h1>
        <h1>Right side text <br> and title</h1>
      </div>
      <div class="col"></div>
      <div class="col-lg-5">
        <img src="https://images.unsplash.com/photo-1683339708262-b1208394ffec?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" alt="image">
      </div>
    </div>
  </div>
</main>

编辑后添加:这里有一个解决方案，使用Java脚本来监听窗口调整大小事件，并相应地调整图像大小.

window.onload = () => {
  window.addEventListener('resize', setImageWidth);
  setImageWidth();
}

function setImageWidth() {
  const img = document.querySelector('#myimage');
  const imgRect = img.getBoundingClientRect();
  const mainRect = document.querySelector('#mymain').getBoundingClientRect();
  img.style.width = (mainRect.width - imgRect.x) +"px";
}

img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 600px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main id='mymain'>
  <div class="container py-5">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <h1>Right side text <br> and title</h1>
        <h1>Right side text <br> and title</h1>
        <h1>Right side text <br> and title</h1>
      </div>
      <div class="col"></div>
      <div class="col-lg-5">
        <img id='myimage' src="https://images.unsplash.com/photo-1683339708262-b1208394ffec?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" alt="image">
      </div>
    </div>
  </div>
</main>

Image showing margins are the same below: