html - 如何在 table/flex 中使用 100% 高度的图像？

Question

在缩小和扩大网站时，我很难让页眉区域按照我想要的方式运行。 header 应该完全响应。

我想要什么

标题由三部分组成:

|-------------------|----------------------------------------------|--------------|
||-----------------||                                              ||------------||
||  The site logo  ||    A text message                            ||Another logo||
||-----------------||                                              ||------------||
|-------------------|----------------------------------------------|--------------|

我希望规则是这样的:

• Logo 占文档宽度的 40%，但不能超过 400 像素。这是通过 width 和 max-width 完成的。高度是动态/自动的。
• 短信栏将尽可能宽，但没有固定宽度。
• 右侧的另一个 Logo 将是列的 100% 高度，该高度基于左侧站点 Logo 的高度。

问题

问题是，如果不与整个文档一样大，似乎不可能使 右侧的 Logo 达到 100% 的高度。我希望它具有列的高度，就好像 Logo 不在其中一样。

我尝试过的

我已经尝试了 table 解决方案(“div with display:table”)和 flex 网格解决方案(div 和 display:flex)。最近提到的是我目前正在努力解决的问题。

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #fff;
  background: #20262e;
}

.container {
  display: flex; 
  flex-direction: row;
}

.col {
  vertical-align: middle;
  background: hsla(0,0%,100%,.1);
  margin:2px;
  padding:10px;
}

.col.logo {
  width: 40%;
  max-width: 400px;
}

.col.logo img {
  width: 100%;
  height: auto;
}

.col.game-host-logo img {
  width:auto;
  max-width: 100%;
  height: 100%;
}

<div class="container">

  <div class="col logo">
    <img src="https://dromfemman.se/assets/img/dromfemman_logo.png" />
  </div>

  <div class="col live-msg">
    Text Message
  </div>

  <div class="col game-host-logo">
    <img src="https://dromfemman.se/assets/img/ssl_logo.svg" />
  </div>

</div>

Answer 1

这里主要有两个问题:

1. flex 容器或图像元素没有固定高度。
2. 包含图像的 flex 元素没有固定宽度。

---

问题 #1: flex 容器或图像元素没有固定高度。

因为 flex 容器或包含图像的元素 (.col.game-host-logo) 没有固定高度，两者的大小都基于内容的大小 (高度:自动默认，per the spec)。

在这种情况下，内容是自然尺寸为 482 x 565 像素的图像。

---

问题 #2:包含图像的 flex 元素没有固定宽度。

因为包含图片的元素没有固定宽度，所以图片可以再次自由扩展到其自然尺寸。

通过为元素设置宽度，您的问题似乎已得到解决，并且没有违反您的任何要求。

jsFiddle demo

.container {
  display: flex;
}

.col.logo {
  width: 40%;
  max-width: 400px;
}

.col.logo img {
  max-width: 100%;
  height: auto;
}

.col.live-msg {
  flex: 1;                  /* consumes all free space */
}

.col.game-host-logo {
  width: 20%;               /* new */
}

.col.game-host-logo img {
  max-width: 100%;
}

.col {
  background: hsla(0, 0%, 100%, .1);
  margin: 2px;
  padding: 10px;
}

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #fff;
  background: #20262e;
}

<div class="container">

  <div class="col logo">
    <img src="https://dromfemman.se/assets/img/dromfemman_logo.png" />
  </div>

  <div class="col live-msg">
    Text Message
  </div>

  <div class="col game-host-logo">
    <img src="https://dromfemman.se/assets/img/ssl_logo.svg" />
  </div>

</div>