Question

我有一个简单的例子：

.container {
  display: flex;
  background-color: #ddd;
  align-items: stretch;
}

.logo {}

.text {
  font-size: 300%;
}

<div class="container">
  <div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png" alt="test logo"></div>
  <div class="text">TEXT</div>
</div>

我需要使图像的高度与右侧而不是vv的同级div相同，即将图像缩小到实际文本高度并保持宽高比。

Answer 1

一个兄弟姐妹应该如何知道另一个兄弟姐妹的身高？这超出了CSS的范围。您将需要一个脚本。

但是，如果两个兄弟姐妹都引用其父辈的身高，则他们可以共享相同的身高。

这可能不是您想要的，但这是一个潜在的解决方案：

.container {
  display: flex;
  background-color: #ddd;
  height: 50px;
}

.logo {
  height: 100%
}

img {
  object-fit: contain;
  height: 100%;
}

.text {
  font-size: 300%;
}

<div class="container">
  <div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png" alt="test logo"></div>
  <div class="text">TEXT</div>
</div>

另请参阅：One flex item sets the height limit for siblings

Answer 2

为图像font-size使用相同的height值，但不能为%单位。

.container {
  display: flex;
}

.logo img {
  height: 3em;
  width: auto;
}

.text {
  font-size: 3em;
}

<div class="container">
  <div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png" alt="test logo"></div>
  <div class="text">TEXT</div>
</div>

Answer 3

在父容器中指定display:flex时，通常可以通过指定父容器的固定高度并相应地设置子元素的大小来设置子元素的大小，其中flex-direction的默认值为{{1} }，如@Michael_B建议。

Answer 4

.container {
    display: flex;
    background-color: #ddd;
    height: 50px;
}
.logo {
    object-fit: cover;
}

.text {
  font-size: 300%;
}
img {
    height: 100%;
    display: block;
}

<div class="container">
  <div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png" alt="test logo"></div>
  <div class="text">TEXT</div>
</div>

使弹性项目兄弟姐妹的高度相同

4 个答案: