css - 在不同屏幕宽度的容器中堆叠响应图像

Question

所以我在更大的显示器上有这个布局:

https://i.ibb.co/5kqvDZj/big.png

我从构建移动版本开始

https://i.ibb.co/CsdS9mS/small.png

现在这两个图像应该随着显示变大而逐渐远离彼此，并且还会发生一些重新排序，因此图像先于文本。

以下是我当前的代码，一旦我拉伸(stretch)屏幕尺寸，一切都变得一团糟..

    section.story
      .container
        .story__head
          p.story__date Since 2010
          h4.story__title Victoria Blend

        .story__images
          .story__image-container
            .story__shape
              svg(width='78', height='263', fill='none', xmlns='http://www.w3.org/2000/svg')

            .story__image-wrapper
              img(src="assets/feat3.png")
          img.story__image(src="assets/feat4.png")
          h5.story__subtitle Designer Story

        .story__details
          p.story__text text goes here...........
          button.story__button.action-btn Discover the Story Behind

.story {
  margin: 24px 0;
  background: $gray-lightest;
  padding-top: 20px;

  &--no-bg {
    background: $white;
  }

  &__date {
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 10px;
  }

  &__head {
    margin: 4px 0 16px 0;
  }

  &__title {
    text-transform: uppercase;
    font-size: 36px;
    line-height: 40px;

    @media only screen and (min-width: 650px) {
      font-size: 43px;
      line-height: 71px;
    }
  }

  &__images {
    position: relative;
    min-height: 515px;
  }

  &__image-container {
    position: absolute;
    max-width: 50%;
    top: 33%;
    transform: translateY(44%);
    z-index: 400;
  }

  &__image-wrapper {
    position: relative;
    display: block;
    height: 100%;
  }

  &__image {
    position: absolute;
    max-width: 90%;
    right: 0;
  }

  &__shape {
    position: absolute;
    z-index: 600;
    position: absolute;
    z-index: 600;
    left: 0;
    bottom: -130px;
    transform: translateX(-50%);

    svg {
      transform: scale3d(0.4,0.4,0.4);

      @media only screen and (min-width: 650px) {
        transform: scale3d(1,1,1);
      }
    }
  }

  &__subtitle {
    position: absolute;
    bottom: 6%;
    left: 37%;  
    font-size: 16px;
    line-height: 33px;
    font-weight: normal;
    letter-spacing: 6px;
    z-index: 500;

    @media only screen and (min-width: 650px) {
      font-size: 20px;
      letter-spacing: 12.5px;
    }
  }

  &__details {
    margin-top: 12px;
  }

  &__text {
    line-height: 23px;
    font-size: 14px;
  }

  &__button {
    margin: 20px auto 0;
  }
}

这是一个完整的 fiddle :https://jsfiddle.net/mests/Lcoxwjet/2/

如果您对代码的任何部分提出任何意见，我也将不胜感激。我真的需要任何建议。

Answer 1

这是一个棘手的布局选择，我会尽力帮助您。 首先，我们不应该在对齐图像中使用转换，因为它在浏览器渲染管道的合成步骤中执行|，因此它不会尊重布局，导致您面临的重叠。

我的建议是:将一张图片对齐到容器的右上角，另一张对齐到右下角。并根据容器的宽度和高度对齐图像。

  .story__image-container {
    position: absolute;
    bottom: 0;
    left: 0;
  }

 .story__image {
    position: absolute;
    right: 0;
    top: 0;
  }

为了使图像随容器宽度调整大小，我们将为每个图像添加一个默认宽度、相对于容器宽度和最大绝对值，以防止它太大。

  .story__image-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    max-width: 300px;
  }

 .story__image {
    position: absolute;
    right: 0;
    top: 0;
    width: 80%;
    max-width: 400px;
  }

你会面临另一个问题，容器的高度，如何让它相对于它的宽度？你可以使用带有百分比值的 padding-top，但是这样你就不能为高度设置最大值并且在桌面上会非常大(你可以为此使用媒体查询，但我不建议这样做)。所以在这里我将使容器高度相对于 viewport 宽度和最大绝对值。

 .story__images {
    position: relative;
    height: 120vw;
    max-height: 700px;
  }

这是您的 fiddle 的更新版本，包含我建议的解决方案:https://jsfiddle.net/Abdelrahman3d/d7xLby5w/2/

我认为您需要调整宽度/高度值以满足您的设计需求，但您理解了我的主要想法。