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

Question

我正在使用这个引导模板创建一个站点：http://getbootstrap.com/examples/cover/

我已经用图像填充了“旋转木马”，但是当我在移动平台上观看时，图像变得压缩，质量很差。我试图根据屏幕大小使用javascript更改图像，但没有产生任何效果。

还有其他方法可以改变在手机上看到的图像吗？

下面是HTML：

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

谢谢!

Answer 1

您应该使用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>