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">
Pergunta
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
Solução 2
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">
Outras dicas
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)