CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lowcoupling
lowcoupling

Reputation: 2169

Twitter Bootstrap Carousel Not Stretching Background Images

I'd like the carousel to scale proportionally the background image

in this question Bootstrap Carousel Image does not scale proportionately it is suggested to leave the image explicit dimension but I can't understand what it means.

Upvotes: 6

Views: 8399

Answers (3)

Nina Morena
Nina Morena

Reputation: 255

Try this option without the 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*/
}

Upvotes: 0

KyleMit
KyleMit

Reputation: 30357

Set this in your HTML

For every img element in your carousel, you can set the width property to 100% like this (although you shouldn't need to if the natural resolution is larger than the control):

<img src="http://i.imgur.com/OEdBxVD.jpg" width='100%'>
  • normally, this image would be too small to expand fully, but 100% scales it up.
  • make sure you don't have the width or height set to any pixel sizes

jFiddle

Since the image is going to go full screen, you should try to get your hands on a resolution that will naturally try to take up the full width available. When the browser has to scale the image up, it will cause artifacts.

Upvotes: 16

Tim Mickey
Tim Mickey

Reputation: 361

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

Upvotes: 1

Related Questions