当我在CSS中定义较小的尺寸时，标题中的徽标图像不会更改尺寸

Question

Website Screenshot : 默认情况下，我的徽标图片为264x84px。它的标题高度为69px，高度已定义为50px，但徽标不会更改大小。比标题大

我尝试设置max-height并将其弄乱，然后将其设置得更小以查看是否有帮助，但根本不会调整大小

//// html ///

<div class='heading'>
        <a class='logo' href="../index.html"><img src="img-tea-cozy-logo.png"></a>

//// html ///

/// css ///

.logo {
    height: 50px;
    float: left;
}

.heading {
    position: fixed;
    width: 100%;
    top: 0;
    border-bottom: 1px solid seashell;
    height: 69px;
}

/// css ///

我不明白为什么图片保持相同大小

Answer 1

您需要直接设置图像的高度或在其上设置对象适合度。 当前图像将在父元素的边界上展开的方式。

Answer 2

您要设置链接的高度，而不是链接内部图像的高度。

更改

.logo {height: 50px;}

到

.logo img {height: 50px;}

Answer 3

.logo {
    height: 50px;
    float: left;
}

.heading {
    position: fixed;
    width: 100%;
    top: 0;
    border-bottom: 1px solid seashell;
    height: 69px;
}

.heading img {
    height: 100%;
    /* or */
    max-height: 100%;
}

Answer 4

这会将图像高度设置为50px

.logo img {height: 50px;}

这会将链接高度设置为50像素

.logo { height: 50px;}