Html 如何在100%高度的桌子/flex内设置图像？

当缩小和扩大网站时，我正在努力使标题区域的行为符合我的要求标题应完全响应。

我想要什么 收割台由三部分组成：

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

我希望规则是这样的：

• 徽标为文档宽度的40%，但宽度不能超过400像素。这是通过

  width

  和

  max width

  完成的。高度是动态/自动的
• 文本消息列将尽可能宽，但没有任何固定宽度
• 右边的另一个徽标将是柱的100%高度，这是基于左侧站点徽标的高度

问题 问题是，如果不使徽标与整个文档一样大，那么它的右侧似乎不可能达到100%的高度。我希望它有柱的高度，就好像标志不在那里一样

我试过的 我已经尝试了表格解决方案（

div

with

display:table

）和flex网格解决方案（

div

with

display:flex

）。最近提到的是我目前正在努力解决的问题

正文{
字体系列：Roboto、Arial、Helvetica、无衬线字体；
字体大小：14px；
颜色：#fff；
背景：#20262e；
}
.集装箱{
显示器：flex；
弯曲方向：行；
}
上校{
垂直对齐：中间对齐；
背景：hsla（0,0%，100%，0.1）；
保证金：2倍；
填充：10px；
}
上校标志{
宽度：40%；
最大宽度：400px；
}
.col.logo img{
宽度：100%；
高度：自动；
}
.col.game-host-logo img{
宽度：自动；
最大宽度：100%；
身高：100%；
}

短信

这里有两个主要问题：

flex容器或图像项上没有固定高度

包含图像的弹性项上没有固定宽度

---

问题#1：flex容器或图像项上没有固定高度。 由于flex容器或包含图像的项目（

.col.game-host-logo

）上没有固定高度，因此这两个项目的大小都基于内容的大小（

高度：auto

默认值，）

在这种情况下，内容是具有482 x 565 px的自然尺寸的图像

---

问题#2：包含图像的弹性项没有固定宽度。 因为包含图像的项目没有固定的宽度，因此图像可以再次自由扩展到其自然尺寸

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

.container{
显示器：flex；
}
上校标志{
宽度：40%；
最大宽度：400px；
}
.col.logo img{
最大宽度：100%；
高度：自动；
}
.col.live-msg{
flex:1；/*占用所有可用空间*/
}
.col.game-host-logo{
宽度：20%；/*新*/
}
.col.game-host-logo img{
最大宽度：100%；
}
上校{
背景：hsla（0,0%，100%，0.1）；
保证金：2倍；
填充：10px；
}
身体{
字体系列：Roboto、Arial、Helvetica、无衬线字体；
字体大小：14px；
颜色：#fff；
背景：#20262e；
}

短信

您需要至少指定一次高度。给出

高度：150px添加到
容器
中，并将属性添加到以下图像类
.col.game-host-logo img{height:-webkit fill available；}
或者有其他方法。穆罕默德·瓦希德·汗（Mohammed Wahed Khan）说：“希望这一切都能实现，但随后它失去了反应能力。”。当我收缩浏览器窗口时，页眉将不会调整为该值。但如果我不可能做我想做的事，那就好了。只是有点惊讶。我想这几天会有一个解决办法。正如我之前所说的，可能还有其他办法。你能告诉我你遇到了什么问题吗？我们可以找到一种方法。@MohammedWahedKhan如果你运行上面的代码示例，你会发现问题是右边的徽标太大了。它应该仅与左侧的徽标一样高。正确的标志应该填补高，因为列有当标志不存在。你的问题。1） 你想让右边的徽标与左边的徽标具有相同的高度A）是的，如果你尝试了我首先评论的内容，你就可以实现它。2） 如果缺少徽标（img），您希望右侧徽标部分的高度保持不变。A） 是的，你也能做到我想问你的问题是，你在工作中面临的问题是什么。