Menu
I have a jsfiddle here - http://jsfiddle.net/gh4Lur4b/8/
It's a full width bootstrap carousel.
I'd like to change the height and still keep it full width.
Is the height determined by the image height.
How can I chanhe the height of the carousel and keep it 100% width.
.carousel-inner{ // height: 300px; } .item, img{ height: 100% !important; width: 100% !important; border: 1px solid red; } 
625
The carousel height is set by the height of the image. @ccc3, Printninja is right. You could set CSS on the image element so that at certain screen sizes (using media queries) the image has a max-height setting. This will effect the width as well because it's going to effect the ratio/dimensions of the image.
If you want to have a carousel image that spans the full width of the screen its probably a good idea to use an image that is at least 1024 px wide (possibly wider), though you don't want it to be too high resolution, since that would take a long time to load.
The following should work
.carousel .item { height: 300px; } .item img { position: absolute; top: 0; left: 0; min-height: 300px; } JSFille for reference.
50
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
