Я изо всех сил пытаюсь создать адаптивную сетку из 2х2 изображений в bootstrap.
Я бы хотел, чтобы изображения заполняли либо высоту, либо ширину браузера. Вот где я застрял в bootstrap.
Код:
<div class="container">
<div class="row">
<div class="col"><img id="Image1" class="img-fluid" src="9e6845.jpg"></div>
<div class="col"><img id="Image2" class="img-fluid" src="6845.jpg"></div>
<div class="w-100"></div>
<div class="col"><img id="Image3" class="img-fluid" src="98d6e6845.jpg"></div>
<div class="col"><img id="Image4" class="img-fluid" src="9e6845.jpg"></div>
</div>
</div>
Проблема:
- Контейнер настроен на максимальную ширину: 1140 пикселей, поэтому на более высоких экранах я получаю пустое пространство внизу.
- Если я установлю контейнер max-width: 100%, ширина изображения выталкивает их из видимой области браузера.
- Лучше ли мне использовать jQuery или подобное, получив общую высоту \ ширину, затем разделив ее на 2 и установив размеры изображения из этого, или есть способ сделать это с помощью bootstrap / CSS / HTML.
Стандартный bootstrap контейнер не заполняет ширину 
100% ширины выдвигается за пределы видимой области браузера. 