Hi guys i am using bootstrap
carousal and having some problem with image height and width. Even though i define it in the img
attribute it still displays as original resolution,following is the code i am using
<div class="col-md-6 col-sm-6">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
</div>
<div class="item">
<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
</div>
<div class="item">
<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Here is demo of that.
What should i do to fill the image in a certain height and width regardless of its original resolution.
You can use background-size: cover
, while still having hidden <img>
element for SEO and semantic purposes. Single img url is used both times, so there's no additional loading, and background-size is well supported (unlike object-fit
which lacks support in IE, Edge and Android < 4.4.4).
HTML change:
<div class="item" style="background-image: url(http://placehold.it/400x400);">
<img src="http://placehold.it/400x400"/>
</div>
CSS change:
.carousel {
/* any dimensions are fine, it can be responsive with max-width */
width: 300px;
height: 350px;
}
.carousel-inner {
/* make sure your .items will get correct height */
height: 100%;
}
.item {
background-size: cover;
background-position: 50% 50%;
width: 100%;
height: 100%;
}
.item img {
visibility: hidden;
}