根据屏幕大小更改图像 src答案

【问题标题】：Changing image src depending on screen size根据屏幕大小更改图像 src
【发布时间】：2020-09-18 01:44:25
【问题描述】：

我正在尝试使用媒体查询根据屏幕大小更改图像 src。我试过背景：url（x）；但它没有用。我在某处读到我应该使用 content: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");   
     } 
}

【问题讨论】：

服务器上有这个吗？
如果 css 在外部文件中，请记住 css 文件中的 url 是相对于 css 文件的，而不是 css 规则适用的 html。
尝试使用 background-image css 规则，确保地址是相对于 css 文件的。
我刚刚尝试将您的图片网址切换到外部页面 - 效果很好，所以我认为 @MarcB 是正确的。 jsfiddle.net/xshaz32e
是的，这是一个 url 问题。我是相对于我的 html 文件编写的。谢谢！

标签： html css twitter-bootstrap

【解决方案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”会在设备宽度超过 900 像素时显示。大于 480px 时为“MediumImage”，小于 480px 时为“OtherImage”。如果你有 "max-width: 900px" 而不是 min-width，它也会在宽度超过 900px 时显示。

希望对你有帮助！

【讨论】：

你在哪里找到这个，我正在尝试这个用于选择但不起作用，或者它只是用于图像？
我认为它只适用于图像，但也许其他标签可以帮助它适用于其他东西
这是一种非常有用的技术，可以节省您为一次性任务等编辑 CSS。
请注意，IE 根本不支持此功能caniuse.com/#feat=picture

【解决方案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>

【讨论】：

适用于静态 URL。但这并不能解决动态创建或从 WebService/Database 接收的 URL

【解决方案3】：

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

解决方案：

使用srcset属性

示例：

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

在上面的代码中，您只需要定义用逗号分隔的图像旁边的宽度大小。

希望对你有帮助:-)

【讨论】：

请注意，当前是not supported by IE at all。对于compatability，最好在css中使用accepted answer的@media解决方案。
IE 像往常一样吸吮
@ashleedawg 是的，但正如我清楚地提到的那样，这些是针对您已经在您的资产中拥有的静态 URL 和图像。当你有一个固定的 url 时，你可以在媒体查询中使用它，但是你从 web 服务/数据库收到的那些 url 呢？在这种情况下，您无法创建媒体查询。不使用 srcset 的唯一解决方案是使用 javascript 获取屏幕大小，然后根据条件设置 url 是否是 Mobile/Tab/Desktop

【解决方案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> 元素，这些元素为浏览器提供了几个不同的来源以供选择，然后是最重要的<img> 元素。

【讨论】：

请注意，当前是not supported by IE at all。对于compatability，最好在css中使用accepted answer的@media解决方案。
2021 年了

【解决方案5】：

我的朋友试试这个：

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

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

【讨论】：