引导程序中的 2x2 图像网格设置高度/宽度 100%

Question

I'm struggling trying to make a responsive grid of 2x2 images in bootstrap.

I'd want the images to fill either the height or width of the browser. This is where i am stuck in bootstrap.

Code:

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

Issue:

• Container is set to max-width:1140px, so on taller screens i end up with empty space at bottom.
• If i set container max-width:100%, the width of the image pushes them out of the viewable area of the browser.
• Am i better off using jQuery or similar getting the total height\width, then dividing it in 2 and setting the image sizes from that, or is there a way to do this with bootstrap/CSS/HTML.

Standard bootstrap container does not fill the width 100% width pushes outside browser viewable area.

Answer 1

Please provide the resolution of your images. Kindly use proper ratio images. Do crop them accordingly.

You can read out about aspect ratios on many sites. Here is the link where you can get the overview information.

Aspect ratios

Please also share clear pictures.