jquery - 强制图像的高度与平行文本 div 相同

Question

在 CSS 中是否可以使图像的高度与包含文本数据的平行 div 的高度相同。我已经应用了两个 div 的 CSS 属性 display: table-cell;。 这是我要达到的预期结果。

Answer 1

我建议使用 flexbox 而不是 table-cell 方法:

.Container {
  display: flex;
}
.ImgContainer, .TextContainer {
  flex: 1;
}

.ImgContainer {
  background: orange;
  
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.TextContainer {
  padding: .5em;
}

<div class="Container">
  <div class="ImgContainer">
    <img src="http://placehold.it/100x75" />
  </div>
  <div class="TextContainer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>


</div>

编辑:我看到您已经更新了您的问题并且想要拉伸(stretch)图像。这使它变得有点困难。通常，我使用 background-image css 属性，因为它让我可以使用出色的 background-size: cover .在语义和可访问性方面，它有点糟糕......

尝试删除 <img>并更改 .ImgContainer 的 css :

.ImgContainer {
  background-image: url(http://placehold.it/100x75);
  background-size: cover;
  background-position: center;
}