@yoyoyooyoyoyoyoyoyoyoyoyo

Как сверстать адаптивную плитку из изображений?

Добрый день. Никак не могу сверстать адаптивные блоки с изображениями. Использую бутстрап, но всё равно не получается. Требуется из первого изображения сделать второе, при этом, чтобы картинка любого размера подстраивалась под заданные размеры.
<div class="container">
<div class="row row-cols-2">
    <div class="col img-responsive left-banner"><a href="#">
            <img src="https://i.ibb.co/VgjY5NT/test.jpg" alt="#" title="#" class="banner-left-img img-responsive">
        </a></div>
    <div class="col">
    <div class="col top-banner img-responsive"><a href="#">
            <img src="https://i.ibb.co/VgjY5NT/test.jpg" alt="#" title="#" class="banner-top-img img-responsive">
        </a></div>
    <div class="col bottom-banner img-responsive"><a href="#">
            <img src="https://i.ibb.co/VgjY5NT/test.jpg" alt="#" title="#" class="banner-bottom-img img-responsive">
        </a></div>
    </div>
  </div>
</div>

607ee8c24792e291138116.jpeg
607ee8c9359b5485499012.jpeg
  • Вопрос задан
  • 146 просмотров
Решения вопроса 1
@Steppp
Гридами удобней всего!

.row .row-cols-2 {
    display: grid;
    grid-template:
      "a b"
      "a c";
}

.img-responsive{ grid-area: a;}
.top-banner{ grid-area: b;}
.bottom-banner{ grid-area: b;}

@media (max-width: 700px) {
  .row .row-cols-2 {
    display: grid;
    grid-template:
      "a a"
      "b c";
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
BormotunJedy
@BormotunJedy
Верстальщик
Flex - поскольку работает на всех без исключения браузерах, даже на IE
.row.row-cols-2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
@media (max-width: 700px) {
.col {flex-direction: row; flex-wrap: wrap;}
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы