CODEWITHSUNDEEP
twitter-bootstrap-3carousel
GIJoeCodes
GIJoeCodes

Reputation: 1850

How to give bootstrap 3.0 carousel item a height of auto

I'm trying to make the images inside bootstrap carousel responsive in terms of height first, width second. This is because the images I'm adding to the carousel are for the most part of larger height than width although I should write the css where it will look the same regardless of the image dimensions.

I am overriding the class on my styles rather than modifying the bootstrap stylesheet because I prefer to load bootstrap using CDN.

The class I'm adding to my style is 

.carousel-inner > .item > img {
    position: absolute;
    top: 0px;
    left: 0px;
    height: auto;
    max-width: 100%;
}

The height: auto and max-width: 100% works great. The problem I run into is that the .carousel .item has a height of 500px. bootstrap.css line 49.

.carousel .item {
    height: 500px;
    background-color: #777;
}

I can't give the class shown above a height of auto because the image then is not visible. If I leave it as such, images with a height over 500px get cut off, images smaller will make the carousel seem out of proportion.

Any help on this will be greatly appreciated. Thanks in advance.

Upvotes: 3

Views: 8236

Answers (1)

GIJoeCodes
GIJoeCodes

Reputation: 1850

This seems to work.

I placed the carousel within a carousel-container div and added the following to my css:

.carousel, .carousel-inner > .item {
  display: run-in;
  width: 100%;
  height: auto!important;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  height: auto;
  max-width: 100%;
  line-height: 1;
}

.carousel-container {
    margin-left:0;
}

Upvotes: 1

Related Questions