根据屏幕大小更改图像(Bootstrap模板)

时间:2015-06-24 22:11:47

标签: javascript jquery twitter-bootstrap

我正在使用此引导程序模板创建网站:http://getbootstrap.com/examples/cover/

我已经用图像填充了“旋转木马”,但是当我在移动设备上观看图像时,图像会被压扁并且质量很差。我试图根据屏幕尺寸使用javascript更改图像,但它没有效果。

我是否可以通过其他方式更改手机上显示的图片?

这是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>

这是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>

谢谢!

1 个答案:

答案 0 :(得分:0)

你应该使用CSS而不是让JS更多地工作:

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;
  }
}

然后是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>