更改基于屏幕

的宽度IMG路径我有一个HTML行：更改基于屏幕

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

有没有什么办法来调用不同的IMG路径时屏幕< 400像素？

这是一个滑块的一部分，我宁愿避免进入CSS。我认为应该有正确的HTML里面一个简单的解决方案 - 像srcset，它不适合某些原因：与<img>

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

我也试过数据媒体属性，但没有运气：

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

社区帮助需要严重。

来源

2016-09-17 Maxim Mezhenkov

为什么不使用正确的元素？ '' – Brad

你可以试试这个Live FIDDLE

[在
引导.IMG响应是定制类] 您可以使用自定义类像您的网站。

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

//你在你的HTML部分将这样

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

为背景图片你可以改变高度：100vh重要;和宽度：100％;这里回地面图像例如

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

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

来源

2016-09-17 20:30:24

他提到他需要使用不同的图像吗？ –

但使用这个他不需要@media查询，这将像自动响应一样工作。 –

我认为是使用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。

来源

2016-09-17 20:30:31

用适当的类添加两个图片到页面，使用CSS媒体查询隐藏和显示相关。带显示none的图像不会在初始页面加载时加载。

实施例：

HTML：

CSS：的.desktop {显示：块; } .mobile {display：none; }

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

来源

2016-09-17 20:59:17

更改基于屏幕

回答

相关问题