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

Question

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

• 左边是一张图片，右边是一些文字。
• 调整图片大小，使其高度与文本高度匹配，不会变形。
• 右边<div>其宽度完全扩展到屏幕边缘。

这是我的意思的一个例子。我已经手动将图像的高度设置为 70px ，但我希望自动设置它，以便两个 block 具有相同的高度。

.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

确实，将表格用于 img 和文本呈现并不是一种好的做法。我应该补充一点，将它们设置为内联样式也不被认为是一种好的做法。如果您需要在网页中动态更改这些值，您可以使用 javascripts native 方法来获取和设置这些高度。

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

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