Укладка адаптивных изображений в контейнере на экранах различной ширины - PullRequest
Новая
       26

Укладка адаптивных изображений в контейнере на экранах различной ширины

0 голосов
/ 18 октября 2019

Итак, у меня есть этот макет на большом дисплее:

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

Я начал с создания мобильной версии

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

Теперь эти два изображения должны постепенно отходить друг от друга, поскольку дисплей становится больше, и также будет происходить некоторая переупорядоченность, поэтому изображения располагаются в первую очередь перед текстом.

Ниже приведен мой текущий код и всепортится, как только я растягиваю размер экрана .. 

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

Вот полная скрипка: https://jsfiddle.net/mests/Lcoxwjet/2/

Буду также признателен за любые комментарии, касающиеся любой частикод. Мне действительно нужны какие-либо предложения.

Ответы [ 2 ]

1 голос
/ 18 октября 2019

Это сложный выбор макета, я постараюсь вам помочь. Во-первых, мы не должны использовать преобразование при выравнивании изображений, потому что оно выполняется на этапе компоновки в конвейере рендеринга браузера, следовательно, оно не будет учитывать расположение, вызывая перекрытие, с которым вы сталкиваетесь.

Мое предложение здесь:чтобы вы выровняли одно изображение в правом верхнем углу контейнера, а другое - в правом нижнем углу. и основываясь на ширине и высоте контейнера, изображения должны быть выровнены. 

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

Вот обновленная версия вашей скрипки с моим предлагаемым решением: https://jsfiddle.net/Abdelrahman3d/d7xLby5w/2/

Я думаю, вам нужно будет отрегулировать значения ширины / высоты в соответствии с вашими потребностями дизайна, но вы поняли мою основную идею.

0 голосов
/ 18 октября 2019

Стилизация с нуля как для настольных компьютеров, так и для мобильных устройств - это как изобретать колесо с самого начала. Я рекомендую использовать рамки, которые облегчают эту задачу для вас, как Bootstrap.

...