具有匹配高度的图像引导响应库答案

【问题标题】：Bootstrap responsive gallery with match height for images具有匹配高度的图像引导响应库
【发布时间】：2020-09-27 06:33:40
【问题描述】：

我正在尝试并尝试构建一些我认为简单的东西，但我知道我不知道该怎么做；）老实说，几个月前我很生气，但我丢失了文件，我现在不知道如何构建它

所以，我使用 Bootstrap 来构建画廊，我有 2 种不同尺寸的长图和短图长的是1920x1200，短的是1200x1200px

我试图在网格中构建它

<div class="row">
      <div class="col-md-6">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      <div class="col-md-6">
        <img src="yourImg" />
      </div>
      <div class="col-md-6">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
</div>

当然它应该看起来像我的预览图

当然，img 应该在每列的中心。

我尝试使用 JS 进行匹配高度，它工作正常，但图像当然不在父 div 中，我无法修复它。我不能使用背景图片，因为 JS 没有读取 div 的大小。

有什么想法吗？如何建造它？最好的事情是我建造了它......现在我可以再次建造它！

非常感谢！

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

如果您希望图像匹配包含 div 的大小，您应该将此代码添加到 CSS：

img {
  max-width: 100%;
  max-height: 100%;
}

你也可以使用这个来保存原始比例：

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

【讨论】：

【解决方案2】：

首先，html的结构不对，每行有 12 列，您已将每行的所有列放在一行中。

代码应该是这样的：

 <div class="row">
    <div class="col-md-6">
       <img>
    </div>
    <div class="col-md-3">
       <img>
    </div>
    <div class="col-md-3">
       <img>
    </div>
 </div>

 <div class="row">
      <div class="col-md-6">
         <img>
      </div>
    <div class="col-md-6">
         <img>
    </div>
 </div>
 
 <div class="row">
   <div class="col-md-3">
       <img>
   </div>
   <div class="col-md-3">
       <img>
   </div>
    <div class="col-md-3">
        <img>
    </div>
    <div class="col-md-3">
        <img>
    </div>
</div>

像这样，图像应该或多或少地按照你想要的方式组织

【讨论】：