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>

在这种情况下＆＃34; BigImage＆＃34;当设备宽度超过900px时显示。＆＃34; MediumImage＆＃34;当它超过480px和＆＃34; OtherImage＆＃34;如果它小于480px。如果你有＆＃34; max-width：900px＆＃34;而不是min-width，它也会在宽度超过900px时显示。

希望它有所帮助！

Answer 2

这对我有用：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

解决方案：

使用srcset属性

示例：

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

在上面的代码中，您需要定义的只是宽度大小，然后以逗号分隔图像。

希望它会有所帮助：-）

Answer 4

<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>元素，这些元素为浏览器提供了几种不同的来源供您选择，然后是最重要的{ {1}}元素。

Answer 5

尝试这个我的朋友：

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

！important声明将解决您的所有问题。我保证。

根据屏幕大小更改图像src

5 个答案: