[英]Change image based on screen size (Bootstrap template)
I am creating a site using this bootstrap template: http://getbootstrap.com/examples/cover/ 我正在使用以下引导程序模板创建网站: http : //getbootstrap.com/examples/cover/
I have filled the 'carousel' with images but when I view on mobile the images become squashed and poor quality. 我已经在“轮播”中填充了图片,但是当我在移动设备上观看时,图片会被压缩并且质量很差。 I have tried to change the image using javascript based on the screen size but it has had no effect.
我试图根据屏幕尺寸使用javascript更改图像,但没有效果。
Is there another way I can change the image seen on mobile? 还有其他方法可以更改在移动设备上看到的图像吗?
Here is the HTML: 这是HTML:
<div class="carousel-inner" role="listbox"> <div class="item active"> <img id="banner" class="first-slide" src="graphics/banner1.gif" alt="First slide"> <div class="container"> <div class="carousel-caption"> </div> </div> </div>
Here is the JS: 这是JS:
<script type="text/javascript">
if ((screen.width<=800) && (screen.height<=600)) {
// Make sure banner is ready in the DOM
document.getElementById('banner').src="graphics/banner2.gif"; }
</script>
Thanks! 谢谢!
You should use CSS instead of making JS work more than it should: 您应该使用CSS而不是使JS发挥更多作用:
CSS: CSS:
@media screen and (max-width: 800px) , screen and (max-height: 600px){
.myclass{
width:500px;
height:300px;
background-image: #ffffff url("banner1.gif") no-repeat left top;
}
}
And then the HTML: 然后是HTML:
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="banner" class="first-slide myclass" />
<div class="container">
<div class="carousel-caption" />
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.