根据屏幕大小更改图像src

Question

我正在尝试使用媒体查询根据屏幕大小更改图像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");   
     } 
}

Answer 1

这个适合我.我不知道你是否熟悉这个标签,但它甚至不需要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"会在设备宽度超过900px时显示."MediumImage"当它超过480px时和"OtherImage"如果它小于480px.如果你有"max-width:900px"而不是min-width,它也会在宽度超过900px时显示.

希望能帮助到你!

Answer 2

这对我有用:

#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>

Answer 3

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

让我们解决这个问题，用<picture>！与<video>和 一样<audio>，该<picture>元素是一个包含多个<source>元素的包装器，这些元素提供多个不同的源供浏览器选择，后面跟着最重要的<img>元素。

Answer 4

我们已经具有根据屏幕尺寸加载图像的功能。您不需要为此的CSS Media查询。因为要加载来自数据库的动态图像，所以您无法即时创建媒体查询。

解决方案：

使用srcset属性

范例：

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

在上面的代码中，您需要定义的是宽度之间的宽度，以逗号隔开。

希望能帮助到你 ：-）