本文介绍了Bootstrap 根据设备更改图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在不同的设备上显示不同的图像(不是背景图像).是否可以像下面这样使用 bootstrap 3.x?
I want to show different images in different devices (not background image). Is it possible to do using bootstrap 3.x like the following?
大屏幕
<img src="large-image.jpg" />
中型设备
<img src="medium-image.jpg" />
用于小型设备
<img src="small-image.jpg" />
等等.
提前致谢.
注意最后我自己找到了一个很好的解决方案.请参阅下面已接受的答案.
推荐答案
在@EIChapo 对这个 2 年前的问题发表评论后,我搜索并阅读了很多关于此解决方案的文章.作为除 IE 之外的所有现代浏览器 支持 标签我发布了这个答案.有一个基于 Dave Newton 的 文章.
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 supports <picture>
tag when I'm posting this answer. There is a bulletproof solution based on Dave Newton's article.
我们需要做的是:
<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;
}
这篇关于Bootstrap 根据设备更改图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!