引导程序根据设备更改图像

Question

我想在不同的设备中显示不同的图像（不是背景图像）。是否可以使用 bootstrap 3.x 进行如下操作？

适用于大屏幕

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

适用于中型设备

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

适用于小型设备

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

等等。

提前致谢。

注意最后我自己找到了一个很好的解决方案。请参阅下面已接受的答案。

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-youre-just-changing-resolutions-use-srcset/

Answer 4

如果你只想加载与屏幕尺寸相关的图像，我认为最好的方法是使用javascript。创建照片的版本，在这种情况下，脚本会查找文件名中带有

img

 的 

"600x400"

，并在屏幕尺寸大于 767 像素时将其替换为 

"1200x800"

。

演示：

http://www.bootply.com/Y8XECJpGjS#

Javascript

if ($(window).width() > 767) {
    $("img[src$='600x400']").each(function() {
        var new_src = $(this).attr("src").replace('600x400', '1200x800'); 
        $(this).attr("src", new_src); 
    });
}

HTML

<div class="thumbnail">
  <img src="//placehold.it/600x400">
</div>

注意：此示例使用 placehold.it 图像，但显然您将创建自己的图像版本，在文件名中包含一些内容来标识它们（即 600px、small、v1 等），然后使用该唯一字符串作为 find/替换脚本中的字符串。即，如果您的文件名是

photo-small.jpg

、

photo-mediumd.jpg

、

photo-large.jpg

，则脚本会查找“小”并在适当的情况下替换为“中”或“大”。

注意：一旦图像加载，就这样 - 当您更改屏幕尺寸时，它不会动态更改图像。肯定有一个解决方案可以做到这一点，但如果不需要的话就太过分了。

Answer 5

Bootstrap 5.XX版本有新的方法。 如果您使用的 bootstrap 版本大于 5，请尝试以下代码。

    <!--Visible only on mobile -->
    
<div class="d-block d-sm-none d-lg-none"> 
        <img src="small-image.jpg" />
</div>
    


    <!-- Hidden only on mobile-->
    
<div class="d-none d-sm-block"> 
        <img src="large-image.jpg" />
</div>

参考https://getbootstrap.com/docs/5.0/utilities/display/