Twitter bootstrap 3 引导根据设备更改映像
我想在不同的设备上显示不同的图像(不是背景图像)。可以像下面这样使用Bootstrap3.x吗 用于大屏幕Twitter bootstrap 3 引导根据设备更改映像,twitter-bootstrap-3,Twitter Bootstrap 3,我想在不同的设备上显示不同的图像(不是背景图像)。可以像下面这样使用Bootstrap3.x吗 用于大屏幕 <img src="large-image.jpg" /> 媒体设备 <img src="medium-image.jpg" /> 用于小型设备 <img src="small-image.jpg" /> 等等 提前谢谢 N.B.最后我自己找到了一个很好的解决方案。请参阅下面已接受的答案。尝试以下方法: <div class="r
<img src="large-image.jpg" />
媒体设备
<img src="medium-image.jpg" />
用于小型设备
<img src="small-image.jpg" />
等等
提前谢谢
N.B.最后我自己找到了一个很好的解决方案。请参阅下面已接受的答案。尝试以下方法:
<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>
希望这可能会有帮助 如果只想加载与屏幕大小相关的图像,我认为最好的方法是使用javascript。创建照片的版本,在本例中,脚本将查找文件名中带有“600x400”的
img
,并在屏幕大小大于767px时将其替换为“1200x800”
演示:
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
注意:本例使用placehold.it图像,但显然您将创建自己的图像版本,在文件名中包含一些标识它们的内容(即600px、small、v1等),然后使用该唯一字符串作为脚本中的查找/替换字符串。i、 例如,如果您的文件名是photo small.jpg
,photo mediumd.jpg
,photo large.jpg
,则脚本将查找“small”,并在适当的情况下替换为“medium”或“large”
注意:一旦图像加载,就是这样-它不会随着您更改屏幕大小而动态更改图像。当然有一个解决方案可以做到这一点,但如果不需要的话,那就太过分了。在@EIChapo对这一两年前的问题发表评论之后,我已经搜索并阅读了很多关于这个解决方案的文章。作为所有现代浏览器,除了IE,当我发布这个答案时。有一个基于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;
}
花式裤子
.假alt{
边界:0;
剪辑:rect(0);
高度:1px;
保证金:-1px;
溢出:隐藏;
填充:0;
位置:绝对位置;
宽度:1px;
}
使用属性
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
这里对其进行了详细描述:
思维敏捷的西迪基!我真的很欣赏它——服务器端代码,您将一个最大的图像放在html中,然后为实际设备的每个断点创建图像。这是经常使用的。以下是客户端的建议:对于服务器端和客户端来说都不错(需要等待所有浏览器支持)。这是一个很好的问题,但在找到答案后,如果不把它放进去,就不能投票here@ElChapo请在您的评论后查看我的答案,谢谢您提醒我。我现在无法进入bootply来确认这一点,但这不是加载所有文件,而是只显示相关的文件吗?我猜(是的猜测)OP希望避免加载未查看的文件…是的,这会加载所有文件!在调整窗口大小时避免回发!我们只有四种屏幕尺寸(xs、sm、md、lg),所以我们只加载4幅图像。没有性能问题。我认为如果加载大图像、中图像、小图像和xs图像,而不是单个小图像,则会出现性能问题。加载时根本不调整大小,而是根据屏幕大小选择要加载的正确图像。仅此一次,这不是一个好的解决方案,因为它将加载所有图像。看看我的答案,两年后我找到了解决办法。
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">