时间戳

首页 > 解决方案 > Flexbox：如何防止一个项目的高度超过其他元素的高度？

html - Flexbox：如何防止一个项目的高度超过其他元素的高度？

问题描述

https://jsfiddle.net/nr7b2qtk/1/

HTML：

<div class="flex">
  <div class="image">
    <img src="https://via.placeholder.com/150">
  </div>
  <div class="text">
    something
  </div>
</div>

CSS：

.flex{
  display:flex;
  align-items:center
}
.text{
  font-size:40px;
  line-height:1.5
  margin-left:auto;
  background:red;color:white
}

在上面的代码中，我希望图像大小缩小以匹配文本元素的高度（在本例中为 45px），除了手动设置图像的宽度/高度之外，还有其他方法可以在纯 CSS 中做到这一点?

标签： htmlcssflexbox

解决方案

推荐阅读