引导使列的高度相同 - 在文本行上对齐

Question

有没有办法平衡文本和图像列的高度？我想将文本块的高度与图像块对齐。

以便缩短/裁剪图片。

.row-eq-height{
display: flex;
}
.row-eq-height [class*="col-"]{
border: 1px solid #000;

}

<div class="container">
<div class="row row-eq-height">  
<div class="col-md-7">
<div class="text-container">
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
</div>
</div>
<div class="col-md-5">
<div class="img-container">
<img src="https://www.placecage.com/400/400" />
</div>
</div>
</div>
</div>

Answer 1

找到了！我不处理<img>，您必须将其作为背景图像插入。

.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<h2>
Bit fat heading!
</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
</div>
<div class="col" style="background-image: url('https://www.placecage.com/400/400');">
</div>
</div>

</div>

Answer 2

您可以将内容容器设置为height：100%。这应该足以达到您想要的结果。

p {
height: 100%;
background-color: grey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4"><p>Text</p></div>
<div class="col-4"><p>Text<br>2</p></div>
</div>

Answer 3

解决此问题的方法是为img元素在其容器.img-container中提供absolute位置

这允许它与标准文档流分离，因此不会影响弹性框的高度

这为您提供了通过 css 或通过style属性调整图像偏移的选项，如果您希望查看图像的特定部分，也可以通过 css 或 属性调整图像偏移

量。

.row-eq-height{
display: flex;
}
.row-eq-height [class*="col-"]{
border: 1px solid #000;

}
.img-container {
position:relative;
overflow:hidden;
height:100%;
}
.img-container img {
position:absolute;
top: 0;
left:0;
}
/* adding in base classes that are inherited from Bootstrap - you can exclude the below code */
.container {
width: 80%;
}
.row {
display:flex;
}
.col-md-7 {
width : 58.333333%;
}
.col-md-5 {
width : 41.666666%;
}

<div class="container">
<div class="row row-eq-height">  
<div class="col-md-7">
<div class="text-container">
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
</div>
</div>
<div class="col-md-5">
<div class="img-container">
<img src="https://www.placecage.com/400/400" />
</div>
</div>
</div>
</div>