如何正确定位螺旋形状的图像

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;
        }
}