更改基于屏幕
的宽度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)" />
社区帮助需要严重。
你可以试试这个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" />
他提到他需要使用不同的图像吗? –
但使用这个他不需要@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。
用适当的类添加两个图片到页面,使用CSS媒体查询隐藏和显示相关。带显示none的图像不会在初始页面加载时加载。
实施例:
HTML:
CSS: 的.desktop {显示:块; } .mobile {display:none; }
@media all and (max-width: 400px){
.desktop { display: none; }
.mobile { display: block; }
}
为什么不使用正确的元素? '' – Brad