【问题标题】：css height property won't apply to html img but width doescss height 属性不适用于 html img 但 width 确实
【发布时间】：2021-09-25 15:53:22
【问题描述】：

我正在尝试使用 100% 的高度在“动物收养中心”旁边放置一个徽标。在开发者工具的 img 上可以看到 height 属性为 100%，但没有被应用。但是，width 属性确实有效。父属性不是 height = 0 并且具有高度，因此这不应该是问题。我很困惑为什么宽度会起作用而高度不会。另外，img 源是 svg。

TLDR

height: 100% 不能在 site-logo 上工作，但 width: 可以。

感谢您的帮助:)

渲染了什么

The result

蓝色轮廓代表“header-content” div，它是图像的父元素。

html

<div id="header-bar">
    <div id="header-content">
        <!-- The site logo -->
        <img id="site-logo" src="assets/logo.svg" alt="site-logo">
        <div id="title-wrapper">
            <h1 id="website-title">{{websiteTitle}}</h1>
            <h4 id="selected-center-city-name">{{currentStoreCity}} Center</h4>
        </div>
    </div>
</div>

css

#header-bar {
    background-color: rgb(75, 75, 75);
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

#header-content {
    color: #fff;
    margin-left: 25px;
}

#site-logo {
   height: 100%;
}

#title-wrapper {
    display: inline-block;
}

#website-title {
    margin-left: 25px;
}

#selected-center-city-name {
    text-align: right;
    margin-right: 25px;
    margin-top: 10px;
}

【问题讨论】：

您的最终目标是什么？您是否希望徽标是全高和旁边的两段文字？对于第二个标题，你想要它一直到右边吗？对齐方式是什么？您可能需要为此使用 flexbox。
您需要定义不带百分比的#header-bar 的高度值。我遇到了这个问题，并以这种方式解决了。我会关注这个问题。如果有其他方法可以提供帮助吗？
@davidleininger 最终目标就像你说的那样；使徽标的两个标题的全高。第二个标题的对齐方式是右对齐并且正在工作。

标签： html css

【解决方案1】：

由于徽标是 SVG，它目前将具有与将自动调整宽度的图形相关联的自动高度。有几种方法可以解决这个问题。

如果网站需要响应，我建议制作一个单独的 div 并给它一个网站徽标的类或 ID。然后不要将其作为 IMG 插入，而是访问 CSS 中的 div 并将背景图像设置为 svg 的相同 URL。有了它，您可以进行大量的尺寸调整，如果您需要缩小或扩大尺寸，这些调整会更有效地发挥作用。

如果您想按原样对其进行编辑，则需要将高度增加得超过基值。在 html 中，您可以添加： height="200px"（或者你想要的大）

在css中你可以做到

height: 100px（将 px 值更改为合适的值） max-height: 100px（如果你想让它们成为响应的最大尺寸）

您可以使用其他度量来更改大小，例如 rem、px、vw、vh。等等。我会查看此链接，以查看根据您的需要更改它的所有不同方法。 https://www.w3schools.com/css/css_dimension.asp

如果您希望它是当前高度和宽度比的精确增量，您甚至可以调整比例，使用 transform: scale(1.5);

【讨论】：

【解决方案2】：

它现在正在工作。 Idk 如果它完全响应，但快速测试很好。我向父元素添加了一个非相对高度（height: 75px;）并添加了display: flex。感谢您的回复！

工作css

#header-bar {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
}

#header-content {
    margin-left: 25px;
    height: 75px;
    display: flex;
}

#site-logo {
   height: 100%;
}

#title-wrapper {
    display: inline-block;
    margin-left: 25px;
    height: 100%;
}

#website-title {
    color: rgb(56, 56, 56);
}

#selected-center-city-name {
    text-align: right;
    margin-right: 25px;
    margin-top: 10px;
    color:rgb(107, 107, 107);
}

【讨论】：