根据屏幕宽度更改 img 路径答案

【问题标题】：Change img path based on width of screen根据屏幕宽度更改 img 路径
【发布时间】：2017-01-25 20:33:56
【问题描述】：

我有一个 html 行：

<img alt="Slider Background" class="background-image" src="img/slide1.jpg" />

屏幕

这是滑块的一部分，我宁愿避免进入 css。我相信在 html 中应该有一个简单的解决方案——比如 srcset，由于某种原因它不起作用：

<img src="img/slide1mini.jpg" srcset="img/slide1.jpg 400w"/>

我还尝试了<img> 的 data-media 属性，但没有运气：

<img src="img/slide1mini.jpg" data-media="(max-width: 400px)" />
<img src="img/slide1.jpg" data-media="(min-width: 401px)" />

急需社区帮助。

【问题讨论】：

为什么不使用合适的元素？ <input type="range" />

标签： html css image media responsive

【解决方案1】：

你可以试试这个Live FIDDLE

[.img-responsive 是
中的自定义类引导] 您可以为您的网站使用自定义类。

.img-responsive {
 display: block; 
 min-width: 100%;
 height: auto;
   }

//你像这样放在你的html部分中

<img class="img-responsive" src="demo.jpg"/>

对于背景图片，你可以改变高度：100vh !important;和宽度：100%；这是背景图片示例

.img-responsive {
  display: block;
  width: 100%;
  min-height: 100vh;
}

&lt;img alt="Slider Background" class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGZQ54YTm4Te6RYbyrhYzs-FusS0HjKwpp8GlhpoH67XRHP6Js" /&gt;

【讨论】：

他提到他需要使用不同的图像对吗？
但是使用这个他不需要@media query ，这将像自动响应一样工作。

【解决方案2】：

我认为最好的方法是使用background-image 而不是<img> 标签，您可以使用媒体查询对其进行修改。

例如，

<div class="img"></div>

.img{
background-image:url('//your link')
}

现在您可以使用媒体查询来更改图像。例如：

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
   .img{
        //change image url
     }


}

您可以阅读有关媒体查询的更多信息here。

【讨论】：

【解决方案3】：

用适当的类向页面添加两个img，使用css媒体查询来隐藏和显示相关。初始页面加载时不会加载显示 none 的图像。

例子：

HTML：

CSS： .desktop { 显示：块； } .mobile { 显示：无； }

@media all and (max-width: 400px){
    .desktop { display: none; }
    .mobile { display: block; }
}

【讨论】：