如何确保 "row" 内的内容始终保持相同的高度？

Question

我正在尝试修复此网站中的错误，因此我在下面的沙盒中重现了该问题

https://codesandbox.io/s/confident-engelbart-q70uc8?file=/index.html

所以现在的问题是当你改变里面的img时，如果尺寸不同，布局会延伸到不同的高度。

你可以看到随着图像的变化布局高度也会发生变化，我试过“高度”但这会破坏它的响应特性，有什么办法可以保持相同的高度但仍然能够响应？

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

  <title>Hello, world!</title>
</head>

<body>
  <section class="py-4 d-flex flex-column align-items-center bg-dark text-white min-height">
    <div class="container">
      <div class="row">
        <div class="col-md-5 d-flex justify-content-end flex-column main-heading">
          <h1 class="display-3 pb-3">Hello</h1>
          <span class="text-info lead">One two three</span>
        </div>
        <div class="col-md-7 d-md-flex justify-content-center align-items-center flex-column">
          <img src="https://i.imgur.com/l4Zvchl.jpg" class="img-fluid lazyload" alt="Page Wallpaper" />
        </div>
      </div>
    </div>
  </section>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

您可以尝试将此 style="object-fit: cover; width: 100%; height: 300px;" 添加到您的 img 元素中（您可以使用 class 自定义它），但由于固定高度，您的图像会被截断一点作为 trade-off.

Mobile size

Desktop size

https://codesandbox.io/s/restless-fire-bp6vcv?file=/index.html:1095-1141

如何确保 "row" 内的内容始终保持相同的高度？

How to make sure the content inside "row" is always the same height?

html

css

twitter-bootstrap

bootstrap-4