Отзывчивые несколько изображений для создания одного изображения с помощью CSS - PullRequest
Новая
       5

Отзывчивые несколько изображений для создания одного изображения с помощью CSS

0 голосов
/ 10 января 2019

Я пытаюсь создать баннер, используя 3 изображения, как показано в этом коде Представление все в порядке, если оно превышает 1200 пикселей, но при уменьшении размера экрана оно перекрывается. 

.yourlimit img:first-child{
    position: absolute;
    left: -8%;
    bottom: 0;
}

.yourlimit img:last-child{
    position: absolute;
    bottom: 40%;
    right: -8%;
}
<html>
    <head>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="container px-md-0 my-5 mx-auto position-relative text-center yourlimit">
            <img class="" src="https://i.ibb.co/GWFDsFk/limit-left-border.png" alt="">
            <img class="img-fluid" src="https://i.ibb.co/t2388tK/limit-img.png" alt="">
            <img class="" src="https://i.ibb.co/XjHJ1dZ/limit-right-border.png" alt="">
        </div>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</html>

Любая идея будет оценена.

Ответы [ 3 ]

0 голосов
/ 10 января 2019

По мере уменьшения ширины экрана контейнер также сжимается. Таким образом, ваши левое и правое изображения составляют + -8% от сжатого контейнера. Самый простой вариант - дать контейнеру ширину центрального изображения: 

.container {
  width: 1140px;
}
0 голосов
/ 10 января 2019

Во-первых, я предлагаю, чтобы основное, центральное изображение (https://i.ibb.co/t2388tK/limit-img.png) не имело белых линий на обоих концах, которые уже покрывают часть текста - это будет невозможно выровнять по браузерам и размерам экрана) .

Далее я добился желаемого эффекта, настроив свой CSS. Я удалил правила bottom, потому что это препятствовало выравниванию изображений сверху, что упрощает настройку IMO. Я также установил первое изображение на left: 0; и последнее изображение на right: 0.

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

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

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


    img {
        border: solid red 1px;
    }
    .yourlimit img:first-child{
        position: absolute;
        left: 0;
        width: 20%;
    }

    .yourlimit .img-fluid {
      width: 80%;
    }

    .yourlimit img:last-child{
        position: absolute;
        right: 0;
        width: 20%;
    }
0 голосов
/ 10 января 2019

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

Например: 

@media screen and (max-width: 600px) {
  .yourlimit img:last-child{
      width: 50%;
  }

  .yourlimit img:first-child{
      width: 50%;
  }
}

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

...