I'm currently facing a challenge in creating a responsive grid of 2x2 images using bootstrap.
My goal is to have the images adjust to either the height or width of the browser. However, I seem to be stuck at this point while working with bootstrap.
Sample 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>
Challenge Encountered:
- The container has been set to max-width:1140px, resulting in empty space on taller screens.
- If I set the container's max-width to 100%, the image width extends beyond the visible area of the browser.
- Should I resort to using jQuery or a similar method to calculate the total height/width and then divide it by 2 to set the image sizes? Or is there a way to achieve this using bootstrap/CSS/HTML?
The standard bootstrap container does not scale to fill the width as desired. https://i.sstatic.net/2oFo3.png When set to 100% width, the images extend outside the viewable area of the browser window. https://i.sstatic.net/48gZx.png