如何调整图片大小，使其高度与相邻文本匹配

Question

我想创建两个满足以下属性的相邻<div>：

• [左一幅包含图片，右一幅包含一些文本。
• 调整图片大小，使其高度与文本的高度匹配，而不会失真。
• 右侧<div>的宽度完全扩展到屏幕边缘。

这里是我的意思的例子。我已经将图像的高度手动设置为70px，但是我希望自动将其设置为使两个块具有相同的高度。

.container {
  display: flex;
}

.left {
  margin-right: 5px;
  border: 1px solid black;
}

.right {
  width: 100%;
  border: 1px solid black;
}

<div class="container">
    <div class="left">
        <img src="https://media.istockphoto.com/photos/stack-of-colorful-books-left-border-picture-id147704087" style="height: 70px;"/>
    </div>
    <div class="right"> line 1 <br> line 2 <br> line 3 <br> line 4 </div>
</div>

我听说表不应该用于这种事情，但是如果有表的解决方案，我可以接受。

Answer 1

var left = document.getElementsByClassName("left");
var height = left.clientHeight;
document.getElementsByClassName("right").style.height = left;

我还应注意，应该计算该元素可能使用的任何其他DOM空间，例如填充边距或边框。