CSS - 如何将元素高度设置为具有自动高度的容器的百分比？

Question

假设我在容器中有一个文本 block ，容器的高度设置为自动。因此，无论存在多少文本，它的高度都会发生变化以动态适应。

然后假设我在容器中也有一个图像，漂浮在文本旁边，我希望它缩放到容器高度的某个百分比。

<div class="container">
<img style="height: 50%; float: left;" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84"><br>
<p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>

如果我将“容器”高度设置为 500 像素，图像将缩放到 250 像素的高度。但是，如果我将“容器”的高度设置为自动，图像的高度不会缩放到其父级高度的 50%。它根本无法扩展。

如果可能的话，我还想在容器中没有文本的情况下对“容器”设置一个最小高度限制，但这不是一个高优先级。

Answer 1

你可以通过 flex css 轻松做到这一点

尝试跟随父 div

display:flex
Flex-direction:row

现在在父 div 中创建 2 个 div，将图像放在一个中，将文本放在另一个中，并将以下内容添加到每个 div 的 css

flex:1

现在 div 的宽度相等并且并排对齐。现在假设您想调整图像，您可以通过在该 div 上提供 padding 或 margin top 或再次使用 flex 来轻松完成。

希望对你有帮助