调整标题标记内的图像大小

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;
}