調整標題標記內的圖像大小

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