创建具有等高图像列和可滚动列表组列的行答案

【问题标题】：Create Row with Equal Height Column of Image and Column of Scrollable List Group创建具有等高图像列和可滚动列表组列的行
【发布时间】：2017-08-26 08:40:50
【问题描述】：

有谁知道如何创建两个具有相同高度的响应式 Bootstrap 4 列，其中一列是图像，另一列是可滚动列表？

这是一个小提琴（注意我不希望列表组在调整视口大小时超过图像的高度）：https://jsfiddle.net/lgants/gyk31vow/

我确实在这方面花了几天时间，所以任何帮助都将不胜感激！

HTML：

<div class="row row-eq-height">
  <div class="col">
    <img src="http://lorempixel.com/output/sports-q-c-800-600-2.jpg">
  </div>
  <div class="col">
    <div class="card">
      <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
      </ul>
    </div>
  </div>
</div>

CSS：

img {
  max-width:100%;
  max-height:100%;
  object-fit: contain;
}

.list-group {
  overflow-y: scroll;
}

【问题讨论】：

标签： jquery html css twitter-bootstrap bootstrap-4

【解决方案1】：

所以在这种情况下你需要做的就是使用JS找到图片的高度，并设置列表的高度等于图片的高度。此外，由于 Bootstrap 4 在 rows 上使用弹性显示，您需要通过为 row 提供 align-items-start 类来将 cols 设置为 align-items: start; 我正在使用 Bootstrap v4-beta

var picHeight = $('.pic-height').height();
$('.list-group').css('height', picHeight);

$(window).resize(function() {
	var picHeight = $('.pic-height').height();
	$('.list-group').css('height', picHeight);
});

img {
  max-width:100%;
  max-height:100%;
  object-fit: contain;
}

.list-group {
  overflow-y: scroll;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row row-eq-height align-items-start">
  <div class="col pic-height">
    <img src="http://lorempixel.com/output/sports-q-c-800-600-2.jpg">
  </div>
  <div class="col">
    <div class="card">
      <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
      </ul>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：