медиа запросы вопрос

182

07 мая 2018, 21:18

Подскажите пожалуйста ребята.Вопрос такой,есть 2 картинки, однa должна отображаться при разрешении экрана 768px, a когда экран становится 320px, то должна появиться другая картинка взамен той что на 768px, пробовал реализовать почему то не получилось...

 @media all and (max-width: 320px) {
    .header__banner__img {
        display: none;
    }
};

@media all and (min-width: 320px) {
    .header__banner__img2 {
        display: none;
    }
};

Answer 1

Вместо медиа запросов так же можно использовать тег picture

<picture> 
 <source srcset="https://placeholdit.co//i/320x200" media="(max-width: 768px)"> 
 <img src="https://placeholdit.co//i/600x300"> 
</picture>

Answer 2

Можно не использовать другие классы, изменять в самом @media

@media all and (max-width: 320px) { 
    .header__banner__img { 
         content: url('http://via.placeholder.com/140x100') 
    } 
}; 
 
@media screen and (min-width: 768px) { 
    .header__banner__img { 
        content: url('http://via.placeholder.com/350x150') 
    } 
}

<h2>Change pictures size after 320px</h2> 
 
<div class="example"> 
<img class="header__banner__img" src="http://via.placeholder.com/350x150" alt="Image" /> 
</div> 
 
<p> After this viewport changes to be 320px you see different picture</p>