html - 如何在 table/flex 中有一个 100% 高度的图像？

问题描述

我正在努力让我的标题区域在缩小和扩大网站时表现出我想要的方式。标题应该是完全响应的。

我想要的是

标头由三部分组成：

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

我希望规则是这样的：

徽标是文档宽度的 40%，但不能超过 400 像素。这是用width和完成的max-width。高度是动态/自动的。
文本消息列将尽可能宽，但没有任何固定宽度。
右侧的另一个徽标将是列的 100% 高度，这是基于左侧站点徽标的高度。

问题

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

我试过的

我已经尝试过表格解决方案（“ divwith display:table”）和弹性网格解决方案（divwith 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>

标签： htmlcssflexboxcss-grid

解决方案

这里有两个主要问题：

弹性容器或图像项上没有固定的高度。
包含图像的弹性项目没有固定宽度。

问题 #1：flex 容器或图像项上没有固定高度。

因为 flex 容器或包含图像 ( ) 的项目上没有固定高度，所以.col.game-host-logo两者的大小都基于内容的大小（height: auto默认值，根据规范）。

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

问题 #2：包含图像的弹性项目没有固定宽度。

因为包含图像的项目上没有固定宽度，所以图像可以再次自由扩展至其自然尺寸。

通过为项目设置宽度，您的问题似乎得到了解决，而不会违反您的任何要求。

jsFiddle 演示

.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>