Bootstrap根据设备更改图像

Question

我想在不同的设备(不是背景图像)中显示不同的图像.是否可以像以下一样使用bootstrap 3.x？

适用于大屏幕

<img src="large-image.jpg" />

适用于中型设备

<img src="medium-image.jpg" />

适用于小型设备

<img src="small-image.jpg" />

等等.

提前致谢.

NB最后,我自己找到了一个很好的解决方案.请参阅下面接受的答案.

Answer 1

试试这个:

<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>

希望这可能有用!!

Answer 2

在@ EIChapo对这个2年前问题的评论之后,我已经搜索并阅读了很多关于这个解决方案的文章.当我发布这个答案时,除了IE之外的所有现代浏览器都支持<picture>标记.根据Dave Newton的文章,有一个防弹解决方案.

我们需要做的是如下:

<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;
}

Answer 3

使用<img>标签并在srcset属性中提供其他图像

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

这里有详细描述：

https://css-tricks.com/responsive-images-yure-just-changed-resolutions-use-srcset/