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

Question

[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>

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

Comments

[yoyoyooyoyoyoyoyoyoyoyoyo]

Попробовал сделать с Вашим решением, но все ломается, когда задаю размеры для фотографий

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

.left-banner{ 
	grid-area: a;
    width: 700px;
}

.banner-left-img {
	height: 100%;
    width: auto;
    max-width: 100%;
}

.top-banner{ 
	grid-area: b;
	margin-bottom: 20px;
	width: 415px;
    height: 240px;
}

.banner-top-img {
	height: 100%;
    width: auto;
    max-width: 100%;
}

.bottom-banner{ 
	grid-area: b;
	width: 415px;
    height: 240px;
}

.banner-bottom-img {
	height: 100%;
    width: auto;
    max-width: 100%;
}

@media (max-width: 700px) {
  .row .row-cols-2 {
    display: grid;
    grid-template:
      "a a"
      "b c";
  }
}

<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">
        </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">
        </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">
        </a></div>
    </div>
  </div>
</div>

[Steppp]

yoyoyooyoyoyoyoyoyoyoyoyo, Надо гридам размеры задавать,
50px - высота 1 строки
auto - высота 2 строки
auto высота 3 строки /50% ширина 1 столбца, calc(50% - 30px) ширина 2 столбца

grid-template:
    "i t" 50px    
    "i c" auto   
    "g g" auto/50% calc(50% - 30px);

а самим фотографиям

Width: 100%
height: 100%
object-fit: cover

Можешь пример тут посмотреть, по заголовку клацни и код эл, вообщем найди класс article-project__top

Answer 2

[Elena Fire]

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