Bootstrap carousel does not stretch background images

Question

I would like the carousel to scale the background image proportionally

in this matter Bootstrap Carousel Image does not scale proportionally , it is proposed to leave an explicit image dimension, but I can not understand what this means.

Answer 1

Set it to HTML

For each img element in your carousel, you can set the width property to 100% as follows (although you don't need to if the natural resolution is greater than the control):

 <img src="http://i.imgur.com/OEdBxVD.jpg" width='100%'> 

• usually this image will be too small to fully expand, but 100% scales it.
• make sure you don't have width or height options for any pixel sizes

jFiddle

Since the image will be displayed in full screen mode, you should try to find a solution that, naturally, will try to use the entire available width. When the browser needs to scale the image, it will cause artifacts.

Answer 2

What they mean is to leave the width = px and height = px of the image (or image styles). You can set width = "100%" and omit the height. The browser will scale proportionally for you.

Answer 3

Try this option without inline styles. Just add this to your stylesheet to override the bootstrap.css style.

 .carousel .item { width: 100%; /*slider width*/ max-height: 600px; /*slider height*/ } .carousel .item img { width: 100%; /*image width*/ }