Изменение размера изображения внутри тега заголовка

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