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

Question

我正在努力尝试在Bootstrap中制作2x2图像的自适应网格。

我希望图像填充浏览器的高度或宽度。这就是我陷入引导的地方。

代码：

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

问题：

• 容器设置为max-width：1140px，所以在较高的屏幕上，我最终在底部留有空白空间。
• 如果我将容器的最大宽度设置为：100％，则图像的宽度会将其推出浏览器的可见区域。
• 我最好还是使用jQuery或类似的方法来获取总高度/宽度，然后将其除以2并从中设置图像大小，或者有没有办法使用bootstrap / CSS / HTML做到这一点。

标准的引导程序容器未填满宽度 100％的宽度将其推送到浏览器可见区域之外。

Answer 1

请提供图像的分辨率。请使用适当比例的图像。进行相应的裁剪。

您可以在许多网站上了解纵横比。这是您可以获取的链接 概述信息。

Aspect ratios

也请分享清晰的图片。