Change image based on screen size (Bootstrap template)

Question

I am creating a site using this bootstrap template: 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.

Is there another way I can change the image seen on mobile?

Here is the 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:

<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!

Answer 1

You should use CSS instead of making JS work more than it should:

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:

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