Make bootstrap carousel display differently on different devices

Question

I am having trouble making my bootstrap carousel display differently on a mobile device and a desktop screen.

Here is my HTML:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

   <div class="item active">
      <center><img src="img.jpg" alt="..."></center>
      <div class="carousel-caption">
       <p>1st Screen</p>
      </div>
    </div>
     <div class="item">
     <center> <img src="img2.jpg"  alt="..."></center>
      <div class="carousel-caption">
       <p>2nd Screen</p>
      </div>
    </div>
    <div class="item">
      <center><img src="img3.jpg" alt="..."></center>
      <div class="carousel-caption">
       <p>3rd Screen</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

You can view the site here

The problem I am having is that my image sizes are appearing different on mobile devices, the 3 images I have are:

img.jpg Dimensions = 700 x 378 pixels

img2.jpg Dimensions = 700 x 378 pixels

img3.jpg Dimensions = 700 x 378 pixels

The images show up fine on desktop devices however on mobile devices the whole image seems to enlarge and some of image goes off the screen.

I want a media query which makes all images width:100% on mobile devices only.

Or is there is an easy way to preserve the size of images on all devices?

Appreciate the help

Answer 1

Bootstraps has a predefined CSS-class called "img-responsive". This should scale your images properly on mobile devices. An example:

<img src="..." class="img-responsive" alt="Responsive image">

Answer 2

Actually there is a jQuery slider plugin called Skidder. Doesn't have the same design as the default bootstrap carousel but is quite good. .img-responsive won't do.

Edit: In the carousel's CSS add height: 54vw; and it should work just fine. (Height/Width% = 54)