How can I make a fixed height element responsive with bootstrap 3? For instance I set the carousal's height at 650px. But I can't make it responsive like the images do. Any idea?
css,
#article-carousel .carousel-inner{
height:650px;
}
html,
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="style/image/10403889_707684359268375_7804458077651816095_o.jpg" class="img-responsive"/>
</div>
....
Width and Height Utilities The width and height can be set for an element, by using 25%, 50%, 75%, 100%, and auto values. For instance, use w-25 (for remaining values, replace 25 with those values) for width utility and h-25 (for remaining values, replace 25 with those values) for height utility.
height:100vh box class has only 100vh which is 100% of the viewport height. When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.
Grid system. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Images in Bootstrap are made responsive with . img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
i had the same problem with the responsive fixed height. I use vh instead of px. In my case it works like a charm
img {
height: 85vh;
width: 100%;
object-fit: cover; // here
}
You can use css3 object-fit for resizing your image http://jsfiddle.net/xcoq9xxg/
img {
height: 650px;
width: 100%;
object-fit: cover; // here
}
It works for Chrome and Opera. Use polyfill library for others: https://github.com/schmidsi/jquery-object-fit or https://github.com/anselmh/object-fit.
Another way is to use css3 background-size http://jsfiddle.net/dizel3d/rwdspudv/
.image {
height: 650px;
background-position: center;
background-size: cover;
}
It works in all modern browsers without javascript, but you need to use <div>
instead of <img>
:
<div class="image" style="background-image: url('my-image.jpg')"></div>
Try below this worked just fine for me
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 500px;
height: 350px;
}
.carousel
{
height: 350px;
width: 500px
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With