以百分比声明时不尊重图像高度[重复]答案

【问题标题】：image height not being respected when declared in percentage [duplicate]以百分比声明时不尊重图像高度[重复]
【发布时间】：2021-01-31 09:52:06
【问题描述】：

我有以下 HTML 标记：

    <div class="img-container"
      <img src="images/" alt="" /> <!-- width: 100%; -->
    </div>

    <div class="img-container">
      <img src="images/" alt="" /> <!-- width: 100%; -->
    </div>

^^^ 我有 2 个图像，每个图像都嵌套在一个 div 中。我给图像设置了 100% 的宽度，因此它们可以占据其父级的全部宽度。我还给 img-container div 设置了 50% 的宽度。一切正常，两个图像在屏幕上的宽度均为 50%。

^^^ 我从来没有给它一个高度值，这就是它的显示方式。

但是当我实际给高度值 50% 时，它会显示如下：

50%的宽度可以用，50%的高度不行？

但是为什么？给它一个以像素为单位的高度可以正常工作，但是当我为它分配一个百分比高度时，它就不会应用那个高度......为什么会这样？

【问题讨论】：

你认为它是 50% 的多少？
^^^ 好问题！例如，我希望每个图像的宽度为屏幕的 50%。我工作正常。我希望这些图像是一个完美的正方形，所以我也尝试给它一个 50% 的宽度，但它不起作用......不指定高度会使高度自动匹配宽度。所以我给了它 50% 的高度，所以图像可以是一个完美的正方形，因为如果我给它 50% 的宽度，那么它也给它 50% 的高度不是正确的吗？
啊。请参阅下面的评论。
所以您希望height:50% 表示容器宽度的 50%。不幸的是，事实并非如此。它是容器高度的 50%，并且容器的高度与宽度不同。

标签： html css image responsive-design height

【解决方案1】：

您的父元素（图像 - 例如 img-container）是否定义了高度？

HTML/CSS 中的高度需要一些时间来适应 - 它并不总是按您期望的方式工作。

如果你看这样的东西，它也与窗口大小有关： https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent

【讨论】：

是的，这就是高度不起作用的元素。我已将 img 标签嵌套在 DIV 标签中。图像将采用其父元素的 100% 宽度和高度，在这种情况下，我给父元素的宽度为 50%
可能是复制/粘贴错误 - 在第一个
示例代码中缺少它？
你是否有一个 div 的父元素或有一个设置高度的 body 定义？
你可能想看看纵横比。在这种情况下，将高度设置为 50% 不会是您想要的。见：w3schools.com/howto/howto_css_aspect_ratio.asp