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

Question

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

这是一个 fiddle (请注意，我不希望列表组在调整视口(viewport)大小时超过图像的高度):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;
}

Answer 1

所以在这种情况下你需要做的是使用JS找到图像的高度并将列表的高度设置为等于图像的高度。此外，由于 Bootstrap 4 在 row 上使用 flex display，因此您需要将 col 设置为 align-items: start; 通过给 row 一类 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>