使用 Bootstrap 4 嵌套行中的图像大小答案

【问题标题】：Image size in nested rows with Bootstrap 4使用 Bootstrap 4 嵌套行中的图像大小
【发布时间】：2019-01-06 13:36:12
【问题描述】：

我正在尝试创建以下布局：

但我正在努力强制右侧 3 个图像的高度不超过左侧图像的高度。这是我目前拥有的；

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <img class="card-img img-fluid" src="https://images.unsplash.com/photo-1528463104570-9b313927fbca?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b2815b93860831943ffdb596ed4b8668"/>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col">
          <div class="card">
            <img class="card-img img-fluid" src="https://images.unsplash.com/photo-1468898203265-d5b5601865c7?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a02d4618cdbf5cf692c5dba45c3ac028"/>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="card">
            <img class="card-img img-fluid" src="https://images.unsplash.com/photo-1476483547798-bf769a2cbba5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bc78be3e84a52b29ec28309d5de33c25"/>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="card">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1513804191723-238c2f3c66f9?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a58c1bc2427d9e45c5d8d7bc69e54aa0"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/sixstring666/pen/ejyZXM

我使用 Bootstrap 是因为它为我处理图像响应（例如当视口很小时将图像堆叠在单个列中）但也许这不是这里的方法？

【问题讨论】：

是的，这不是办法。您应该指定高度的适当大小的图像。

标签： html css image grid bootstrap-4

【解决方案1】：

您需要固定图像两侧的高度。

【讨论】：

【解决方案2】：

不太确定这是不是最好的解决方案，因为我认为您将失去响应功能并且您需要编辑图像，但我希望它可以帮助：

.bigger {
			height: 300px !important;
		}
		
		.smaller {
			height: 99px !important;
			margin-bottom: 2px;
		}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">



<div class="container-fluid">
  <div class="row main">
    <div class="col-sm-6"> <img class="card-img img-fluid bigger" src="https://images.unsplash.com/photo-1528463104570-9b313927fbca?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b2815b93860831943ffdb596ed4b8668"/> </div>
    <div class="col-sm-6">
      <div class="col-sm-12"> <img class="card-img img-fluid smaller" src="https://images.unsplash.com/photo-1468898203265-d5b5601865c7?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a02d4618cdbf5cf692c5dba45c3ac028"/> </div>
      <div class="col-sm-12"> <img class="card-img img-fluid smaller" src="https://images.unsplash.com/photo-1476483547798-bf769a2cbba5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bc78be3e84a52b29ec28309d5de33c25"/> </div>
      <div class="col-sm-12"> <img class="card-img img-fluid smaller" src="https://images.unsplash.com/photo-1513804191723-238c2f3c66f9?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a58c1bc2427d9e45c5d8d7bc69e54aa0"/> </div>
    </div>
  </div>
</div>

【讨论】：