blocks|key|194022|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|194023|<div+class="row">
++++<div+class="col-xs-12+hidden-sm+hidden-md+hidden-lg">++
++++++++<img+class="img-responsive"+src="layouts/layouts.PNG"+/>++++
++++</div>
++++<div+class="hidden-xs+col-sm-12+hidden-md+hidden-lg">
++++++++<img+class="img-responsive"+src="layouts/05.png"+/>+++
++++</div>
++++<div+class="hidden-xs+hidden-sm+col-md-12+hidden-lg">
++++++++<img+class="img-responsive"+src="layouts/06.png"+/>+++
++++</div>
++++<div+class="hidden-xs+hidden-sm+hidden-md+col-lg-12">
++++++++<img+class="img-responsive"+src="layouts/Layout_100.png"+/>++
++++</div>
</div>|code-block|syntax|javascript|194024|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this:</p>
<pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-xs-12 hidden-sm hidden-md hidden-lg&quot;&gt;  
        &lt;img class=&quot;img-responsive&quot; src=&quot;layouts/layouts.PNG&quot; /&gt;    &lt;!--Mobile--&gt;
    &lt;/div&gt;
    &lt;div class=&quot;hidden-xs col-sm-12 hidden-md hidden-lg&quot;&gt;
        &lt;img class=&quot;img-responsive&quot; src=&quot;layouts/05.png&quot; /&gt;   &lt;!--Tab--&gt;
    &lt;/div&gt;
    &lt;div class=&quot;hidden-xs hidden-sm col-md-12 hidden-lg&quot;&gt;
        &lt;img class=&quot;img-responsive&quot; src=&quot;layouts/06.png&quot; /&gt;   &lt;!--Desktop--&gt;
    &lt;/div&gt;
    &lt;div class=&quot;hidden-xs hidden-sm hidden-md col-lg-12&quot;&gt;
        &lt;img class=&quot;img-responsive&quot; src=&quot;layouts/Layout_100.png&quot; /&gt;  &lt;!--Large--&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1432834|text|如果您只想加载与屏幕大小相关的图像，我认为最好的方法是使用javascript。创建照片的版本，在本例中，脚本在文件名中查找带有img的"600x400"，并在屏幕大小大于767+is时用"1200x800"替换它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1432835|演示：http://www.bootply.com/Y8XECJpGjS#|1432836|Javascript|1432837|if+($(window).width()+>+767)+{
++++$("img[src$='600x400']").each(function()+{
++++++++var+new_src+=+$(this).attr("src").replace('600x400',+'1200x800');+
++++++++$(this).attr("src",+new_src);+
++++});
}|code-block|syntax|javascript|1432838|HTML|1432839|<div+class="thumbnail">
++<img+src="//placehold.it/600x400">
</div>|1432840|注意:这个示例使用placehold.it映像，但是很明显，您将创建自己的映像版本，在文件名(即600+as、small、v1等)中包含一些标识它们的内容，然后使用该唯一字符串作为脚本中的查找/替换字符串。也就是说，如果您的文件名是photo-small.jpg、photo-mediumd.jpg、photo-large.jpg，那么脚本将查找"small“，并在适当情况下将其替换为”中型“或”大型“。|1432841|注意:一旦图像加载，就是这样-它不会动态地更改图像输出，因为您改变了屏幕大小。当然，有一个解决办法可以做到这一点，但如果不需要的话，就会过度杀戮。|1432842|entityMap|0|LINK|mutability|MUTABLE|url|http://www.bootply.com/Y8XECJpGjS#^0|1S|3|1W|9|2M|A|0|3|Y|0|0|0|0|0|0|38|F|3O|H|46|F|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|H|3|I|5|6|7|1F|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1G|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

<p>If you want to load only the image relevant to the screen-size, I think the best way is with javascript. Create versions of your photos, and in this case the script looks for an <code>img</code> with <code>"600x400"</code> in the filename, and replaces it with <code>"1200x800"</code> when the screensize is bigger than 767px.</p>

<p>DEMO: <a href="http://www.bootply.com/Y8XECJpGjS#" rel="nofollow">http://www.bootply.com/Y8XECJpGjS#</a></p>

<p>Javascript</p>

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

<p>HTML</p>

<pre><code>&lt;div class="thumbnail"&gt;
  &lt;img src="//placehold.it/600x400"&gt;
&lt;/div&gt;
</code></pre>

<p>NOTE: this example uses placehold.it images, but obviously you will create your own image versions, include something to identify them in the filename (i.e. 600px, small, v1, etc), and then use that unique string as the find/replace strings in the script. i.e. If your filenames are <code>photo-small.jpg</code>, <code>photo-mediumd.jpg</code>, <code>photo-large.jpg</code>, then the script looks for "small" and replaces with "medium" or "large" where appropriate.</p>

<p>NOTE: once the image loads, that's it - it does not dynamically change image out as you change the screensize. There is surely a solution that does that, but overkill if not needed.</p>


blocks|key|1432902|text|在@EIChapo对这个两年前的问题发表评论之后，我搜索并阅读了很多关于这个解决方案的文章。作为所有现代浏览器，除了IE+标签，当我发布这个答案时。有一个基于戴夫牛顿的文章的防弹解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1432903|我们需要做的是：|1432904|<picture+alt="fancy+pants">
++++
++++<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"+/>

++++
++++<![if+gte+IE+8]>
++++<object+data="fallback.jpg"+type="image/jpeg"></object>
++++<span+class="fake-alt">fancy+pants</span>
++++<![endif]>

++++
++++
</picture>

.fake-alt+{
++++border:+0;
++++clip:+rect(0+0+0+0);
++++height:+1px;
++++margin:+-1px;
++++overflow:+hidden;
++++padding:+0;
++++position:+absolute;
++++width:+1px;
}|code-block|syntax|javascript|1432905|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=picture|1|https://www.smashingmagazine.com/2013/05/how-to-avoid-duplicate-downloads-in-responsive-images/^0|1P|2|0|2C|2|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>After @EIChapo's comment on this 2 years back question, I have search and read a lot of articles for this solution. As all modern browser except IE <a href="http://caniuse.com/#feat=picture" rel="noreferrer">supports <code>&lt;picture&gt;</code> tag</a> when I'm posting this answer. There is a bulletproof solution based on Dave Newton's <a href="https://www.smashingmagazine.com/2013/05/how-to-avoid-duplicate-downloads-in-responsive-images/" rel="noreferrer">article</a>.</p>

<p>What we need to do is as following:</p>

<pre><code>&lt;picture alt="fancy pants"&gt;
    &lt;!-- loaded by browsers that support picture and that support one of the sources --&gt;
    &lt;source srcset="big.jpg 1x, big-2x.jpg 2x, big-3x.jpg" type="image/jpeg" media="(min-width: 40em)" /&gt;
    &lt;source srcset="med.jpg 1x, med-2x.jpg 2x, big-3x.jpg" type="image/jpeg" /&gt;

    &lt;!-- loaded by IE 8+, non-IE browsers that don’t support picture, and browsers that support picture but cannot find an appropriate source --&gt;
    &lt;![if gte IE 8]&gt;
    &lt;object data="fallback.jpg" type="image/jpeg"&gt;&lt;/object&gt;
    &lt;span class="fake-alt"&gt;fancy pants&lt;/span&gt;
    &lt;![endif]&gt;

    &lt;!-- loaded by IE 6 and 7 --&gt;
    &lt;!--[if lt IE 8]&gt;
    &lt;img src="fallback.jpg" alt="fancy pants" /&gt;
    &lt;![endif]--&gt;
&lt;/picture&gt;

.fake-alt {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
</code></pre>


blocks|key|194187|text|使用<img>标记并在srcset属性中提供其他图像|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|194188|<img+src="small.jpg"+srcset="medium.jpg+1000w,+large.jpg+2000w"+alt="yah">|code-block|syntax|javascript|194189|在此详细说明如下：|194190|https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/|194191|entityMap|0|LINK|mutability|MUTABLE|url^0|2|5|B|6|0|0|0|0|2C|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|O|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|N]]]]

<p>Use the <code>&lt;img&gt;</code> tag and provide other images in the <code>srcset</code> attribute</p>

<pre><code>&lt;img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"&gt;
</code></pre>

<p>It is described in detail here: </p>

<p><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/" rel="noreferrer">https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/</a></p>


blocks|key|555034|text|引导5.XX版本有了新的方法。如果您使用的引导版本大于5，请尝试下面的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|555035|++++
++++
<div+class="d-block+d-sm-none+d-lg-none">+
++++++++<img+src="small-image.jpg"+/>
</div>
++++


++++
++++
<div+class="d-none+d-sm-block">+
++++++++<img+src="large-image.jpg"+/>
</div>|code-block|syntax|javascript|555036|参考文献+https://getbootstrap.com/docs/5.0/utilities/display/|offset|length|style|BOLD|555037|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/5.0/utilities/display/^0|0|0|0|4|5|1G|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Bootstrap 5.XX version have the new approach.
please try the code bellow if you are using bootstrap version greater than 5.</p>
<pre><code>    &lt;!--Visible only on mobile --&gt;
    
&lt;div class=&quot;d-block d-sm-none d-lg-none&quot;&gt; 
        &lt;img src=&quot;small-image.jpg&quot; /&gt;
&lt;/div&gt;
    


    &lt;!-- Hidden only on mobile--&gt;
    
&lt;div class=&quot;d-none d-sm-block&quot;&gt; 
        &lt;img src=&quot;large-image.jpg&quot; /&gt;
&lt;/div&gt;
</code></pre>
<p><strong>Refrence <a href="https://getbootstrap.com/docs/5.0/utilities/display/" rel="nofollow noreferrer">https://getbootstrap.com/docs/5.0/utilities/display/</a></strong></p>


<p>I want to show different images in different devices (not background image). Is it possible to do using bootstrap 3.x like the following?</p>

<p>For large screen</p>

<pre><code>&lt;img src="large-image.jpg" /&gt;
</code></pre>

<p>for medium device</p>

<pre><code>&lt;img src="medium-image.jpg" /&gt;
</code></pre>

<p>for small device</p>

<pre><code>&lt;img src="small-image.jpg" /&gt;
</code></pre>

<p>and so on.</p>

<p>Thanks in advance.</p>

<p><strong>N.B. Finally I have found a good solution by myself. See the accepted answer below.</strong></p>


Bootstrap change image according to device

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想在不同的设备中显示不同的图像(而不是背景图像)。可以像下面这样使用引导3.x吗？用于大屏幕<img src="large-image.jpg" />介质设备<img src="medium-image.jpg" />用于小型设备<img src="small-image.jpg" />诸若此类。提前谢谢。N.B.最...

问引导根据设备改变图像
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导根据设备改变图像EN