Question

我想创建类似以下屏幕截图的内容：https://imgur.com/a/QlRbxsw

但是我尝试使用引导程序4对列进行处理。起初，渲染效果很好，但是由于所有元素都在容器流体中，因此当我调整窗口大小时，会破坏布局。

这是我的代码：

.secondary-title {
  color: #CABB9D;
  font-size: 1.4em;
  line-height: 1.9em;
  & span {
    color: #18161A;
    font-family: 'PTSans';
    font-weight: bold;
    font-size: 2.2em;
  }
}

.two-points {
  border-top: 10px dotted #C1B89C;
  width: 40px;
  margin-left: 0;
  margin-top: 0;
}

.cf-square-pic {
  & .bloc-title {
    width: 445px;
    margin: 50px 0 110px 20px;
  }
  & .photo-4 {
    margin-top: 50px;
  }
}

<div class="container-fluid cf-square-pic px-0">
  <div class="row no-gutters">
    <div class="col-lg-7">
      <img src="/assets/img/photo/photo-1.jpg" alt="" class="d-block w-100 photo-1">
    </div>
    <div class="col-lg-5">
      <div class="bloc-title px-3">
        <h2 class="secondary-title mb-1">
          <span>LOREM IPSUM DOLOR</span>
        </h2>
        <hr class="two-points" />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec purus urna. Pellentesque varius facilisis tellus nec ullamcorper. Ut sit amet vulputate mauris.
        </p>
      </div>
      <img src="/assets/img/photo/photo-4.jpg" alt="" class="d-block w-100 photo-4">
    </div>
    <div class="col-lg-5">
      <img src="/assets/img/photo/photo-2.jpg" alt="" class="d-block w-100 photo-2">
    </div>
    <div class="col-lg-7">
      <img src="/assets/img/photo/photo-3.jpg" alt="" class="d-block w-100 photo-3">
    </div>
  </div>
</div>

有没有人知道如何在调整左尺寸时将左下方的最后一个图像固定在左上角的图像的底部，而又不会丢失纵横比？

预先感谢您的帮助！

Answer 1

我找到了怎么做！所以这是对我有用的代码：

    <div class="container-fluid cf-square-pic px-0">
        <div class="row no-gutters row-flex">
              <img src="/assets/img/photo/photo-1.jpg" alt="" class="d-block w-100 photo-1">
              <img src="/assets/img/photo/photo-2.jpg" alt="" class="d-block w-100 photo-2">
              <div class="bloc-title px-3">
                  <h2 class="secondary-title mb-1">
                      <span>LOREM IPSUM DOLOR</span>
                  </h2>
                  <hr class="two-points"/>
                  <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec purus urna. Pellentesque varius facilisis tellus nec ullamcorper. Ut sit amet vulputate mauris.
                  </p>
              </div>
              <img src="/assets/img/photo/photo-4.jpg" alt="" class="d-block w-100 photo-4">
              <img src="/assets/img/photo/photo-3.jpg" alt="" class="d-block w-100 photo-3">
        </div>
    </div>

.cf-square-pic {
    & .bloc-title {
        width: 445px;
        margin: 50px 0 80px 20px;
    }
    & .row-flex {
        display: flex;
        flex-flow: column wrap;
        width: 100%;
        max-height: 95vw;
        & .photo-1 { width: 54%; }
        & .photo-2 {
            width: 35%;
            border-top: 4px solid #fff;
            border-right: 4px solid #fff;
        }
        & .photo-3 {
            width: 65%;
            margin-left: -19%;
        }
        & .photo-4 {
            width: 46%;
            border-bottom: 4px solid #fff;
            border-left: 4px solid #fff;
        }
}

如何以螺旋形状正确放置图像

1 个答案: