html - 调整标题标签内的图像大小

Question

我正在尝试调整图像大小以使其具有响应性，该图像位于<h1>标签内。我的代码：

<div id="header" class="clearfix">
    <h1 id="logo" >
        <img alt="" src="/images/layouts/logo.png"/>
    </h1>
    <div id="heading">
        <h2>Sample<span class="white">Title</span></h2>
        <p class="white">Some Text</p>
    </div>
</div>

我的CSS：

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

和<h1>标签

h1 { font-size: 2em; margin-top: 0.75em; margin-bottom: 0.75em; }

我尝试在 h1 中调整字体大小

@media screen and (max-width:320px) {
#header #logo h1 {

        font-size: 5px;
        margin-top: 25px; margin-bottom: 25px;
    }}

但是好像没什么效果。我应该怎么做才能减小<h1>标签的大小？

Answer 1

您需要调整大小的不是 h1 标签。如果你检查你的元素，你会发现你的 h1 调整大小很好，但是你的图像挡住了宽度。您希望图像最多不大于页面宽度。

穿上max-width: 100%;你的img：

#header #logo img {
    max-width: 100%;
    height: auto;
}