引导根据设备改变图像
引导根据设备改变图像
提问于 2014-08-25 09:26:08
我想在不同的设备中显示不同的图像(而不是背景图像)。可以像下面这样使用引导3.x吗？
用于大屏幕
<img src="large-image.jpg" />介质设备
<img src="medium-image.jpg" />用于小型设备
<img src="small-image.jpg" />诸若此类。
提前谢谢。
N.B.最后我自己找到了一个很好的解决方案。请参见下面接受的答案.
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-08-11 06:56:32
在@EIChapo对这个两年前的问题发表评论之后，我搜索并阅读了很多关于这个解决方案的文章。作为所有现代浏览器，除了IE 标签，当我发布这个答案时。有一个基于戴夫牛顿的文章的防弹解决方案。
我们需要做的是：
<picture alt="fancy pants">
<!-- loaded by browsers that support picture and that support one of the sources -->
<source srcset="big.jpg 1x, big-2x.jpg 2x, big-3x.jpg" type="image/jpeg" media="(min-width: 40em)" />
<source srcset="med.jpg 1x, med-2x.jpg 2x, big-3x.jpg" type="image/jpeg" />
<!-- loaded by IE 8+, non-IE browsers that don’t support picture, and browsers that support picture but cannot find an appropriate source -->
<![if gte IE 8]>
<object data="fallback.jpg" type="image/jpeg"></object>
<span class="fake-alt">fancy pants</span>
<![endif]>
<!-- loaded by IE 6 and 7 -->
<!--[if lt IE 8]>
<img src="fallback.jpg" alt="fancy pants" />
<![endif]-->
</picture>
.fake-alt {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}Stack Overflow用户
发布于 2014-08-25 09:46:19
试试这个：
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
<img class="img-responsive" src="layouts/layouts.PNG" /> <!--Mobile-->
</div>
<div class="hidden-xs col-sm-12 hidden-md hidden-lg">
<img class="img-responsive" src="layouts/05.png" /> <!--Tab-->
</div>
<div class="hidden-xs hidden-sm col-md-12 hidden-lg">
<img class="img-responsive" src="layouts/06.png" /> <!--Desktop-->
</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-12">
<img class="img-responsive" src="layouts/Layout_100.png" /> <!--Large-->
</div>
</div>Stack Overflow用户
发布于 2017-04-17 11:30:53
使用<img>标记并在srcset属性中提供其他图像
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">在此详细说明如下：
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25482765
复制相关文章
相似问题
腾讯云开发者
