Изменение изображения src в зависимости от размера экрана

Я пытаюсь изменить изображение src в зависимости от размера экрана, используя медиа-запросы. Я попробовал фон: url (x); но это не сработало. Я где-то читал, что должен использовать контент: url (x), но когда я это сделаю, я получаю пустую страницу. Может ли кто-нибудь сказать мне, что не так с моим кодом?

HTML:

<div class="container" id="at-header">
  <img class="image" id="logo" src="img/logo_white.png" />
  <img class="image" id="main-img" src="img/desktop_homepage.jpg" />
</div>

CSS

@media screen and (max-width: 767px){   
    #main-img{      
        content:url("img/mobile_homepage.jpg");
    } 
}

@media screen and (min-width: 768px) {      
    #main-img{      
       content:url("img/tablet_homepage.jpg");
     } 
} 
@media (min-width: 992px){      
      #main-img{        
          content:url("img/desktop_homepage.jpg");  
      } 
}
@media (min-width: 1200px) {    
     #main-img{         
         content:url("img/desktop_homepage.jpg");   
     } 
}

Ответ 1

это работает для меня:

#main-img {
  
  height: 250px;
  width:100%
} 

@media screen and (max-width: 767px) {   
    #main-img{
    	background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png);
    } 
}

@media screen and (min-width: 768px) {      
    #main-img{      
    	background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png);
    } 
} 
@media (min-width: 992px) {      
      #main-img{        
          background-image: url(http://subtlepatterns.com/patterns/paisley.png);
      } 
}
@media (min-width: 1200px) {    
     #main-img{         
         background-image: url(http://subtlepatterns.com/patterns/paisley.png);
     } 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <div id="main-img" />
</div>

Ответ 2

Этот работает для меня. Я не знаю, знаком ли вы с этим тегом, но ему даже не нужен CSS.

<picture>
    <source media="(min-width: 900px)" srcset="BigImage.png">
    <source media="(min-width: 480px)" srcset="MediumImage.png">
    <img src="OtherImage.png" alt="IfItDoesntMatchAnyMedia">
</picture>

В этом случае "BigImage" будет показывать, когда ширина устройства превышает 900 пикселей. "MediumImage", когда его более 480 пикселей и "OtherImage", если оно меньше 480 пикселей. Если у вас была "max-width: 900px" вместо min-width, она также показывала бы, когда ширина больше 900px.

Надеюсь, что это поможет!

Ответ 3

У нас уже есть функция загрузки изображений в зависимости от размеров экрана. Вам не нужен CSS Media запрос для этого. потому что для загрузки динамических изображений, поступающих из базы данных, невозможно создать медиа-запрос на лету.

РЕШЕНИЕ:

Использовать атрибут srcset

ПРИМЕР:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

в приведенном выше коде все, что вам нужно определить, это размер ширины рядом с изображениями, разделенными запятыми.

Надеюсь, поможет :-)