0

<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>タグのサイズを小さくするにはどうすればよいですか?

4

1 に答える 1

0

サイズを変更する必要があるのは h1 タグではありません。要素を調べると、h1 のサイズが正常に変更されていることがわかりますが、画像が幅をブロックしています。画像は、せいぜいページ幅以下にします。

着る：max-width: 100%;_img

#header #logo img {
    max-width: 100%;
    height: auto;
}
于 2013-10-03T06:05:20.720 に答える