如何确保“row”内的内容正确总是相同的高度？
我正在尝试修复此网站中的错误，因此我在下面的沙箱中重现了该问题
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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>I am trying to fix a bug in this website, so I reproduce the problem in the sandbox below
https://codesandbox.io/s/confident-engelbart-q70uc8?file=/index.html
So right now the problem is when ever you change the img inside,if the size is different, the layout will extend to different height.
You can see as the image change the layout height will change as well, I tried "height" but this will ruin the responsive feature of it, is there any way to mantain the same height but still be able to be responsive?
<!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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以尝试将此
style="object-fit: cover; width: 100%; height: 300px;"添加到您的img元素（您可以使用 class 自定义它） ），但作为权衡，由于固定高度，您的图像会被剪掉一点。移动设备尺寸
桌面大小
https://codesandbox.io/s/restless-fire -bp6vcv?file=/index.html:1095-1141
You can try to add this
style="object-fit: cover; width: 100%; height: 300px;"to yourimgelement (you can customize it with class), but your image will be cut off a bit due to fixed height as a trade-off.Mobile size
Desktop size
https://codesandbox.io/s/restless-fire-bp6vcv?file=/index.html:1095-1141