Fixed height and width for bootstrap carousel

Question

I am using the bootstrap carousel but I want a fixed width and height so that all my images will auto fit to the defined height and width  Can someone please help me on achieving this    lt div class  row  gt       lt div class  span8  gt           lt div id  myCarousel  class  carousel slide  gt               lt ol class  carousel-indicators  gt                   lt li data-target   myCarousel  data-slide-to  0  class  active  gt  lt  li gt                   lt li data-target   myCarousel  data-slide-to  1  class    gt  lt  li gt                   lt li data-target   myCarousel  data-slide-to  2  class    gt  lt  li gt               lt  ol gt               lt div class  carousel-inner  gt                   lt div class  item active  gt                        lt img src    Images Carousel carousel 1 jpg  alt  http   www google com  gt                       lt div class  carousel-caption  gt                           lt h4 gt First Thumbnail label lt  h4 gt                            lt p gt Deals you cannot miss  lt  p gt                       lt  div gt                   lt  div gt                   lt div class  item  gt                       lt img src    Images Carousel carousel 2 jpg  alt  http   www google com  gt                       lt div class  carousel-caption  gt                           lt h4 gt Second Thumbnail label lt  h4 gt                            lt p gt Claim it now  lt  p gt                       lt  div gt                   lt  div gt                   lt div class  item  gt                       lt img src    Images Carousel carousel 1 jpg  alt  http   www google com  gt                       lt div class  carousel-caption  gt                           lt h4 gt Third Thumbnail label lt  h4 gt                            lt p gt Act fast  Only for today  lt  p gt                       lt  div gt                   lt  div gt               lt  div gt               lt a class  left carousel-control  href   myCarousel  data-slide  prev  gt     lt  a gt               lt a class  right carousel-control  href   myCarousel  data-slide  next  gt     lt  a gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

To have a consistent flow of the images on different devices  you d have to specify the width and height value for each carousel image item  for instance here in my example the image would take the full width but with a height of  400px   you can specify your personal value instead    lt div class  item  gt           lt img src  image jpg  style  width 100   height  400px   gt         lt  div gt

User · Answer

Because some images could have less than 500px of height  it s better to keep the auto-adjust  so i recommend the following    lt div class  carousel-inner  role  listbox  style  max-width 900px  max-height 600px  important   gt

User · Answer

set style  quot height 300px  important  quot  and  quot imgBanner quot  for img tag   lt img src  quot  image 1 jpg quot  class  quot imgBanner quot  style  quot width 100   height 300px  important  quot  gt   then if you want responsive image  so you can use jquery as     function         window  resize respWhenResize      respWhenResize           respWhenResize             if  pagesize  lt  578                 imgBanner   css  height   200px             else if  pagesize  gt  578                     imgBanner   css  height   300px

User · Answer

In your main styles css file change height auto to whatever settings you desire  For example  500px      myCarousel     height  auto    width  auto    overflow  hidden

User · Answer

Apply following style to carousel listbox    x000D   x000D   lt div class  carousel-inner  role  listbox  style   width 100   height  500px  important   gt  x000D   x000D      x000D   x000D   lt  div x000D   x000D   x000D

[twitter-bootstrap] Fixed height and width for bootstrap carousel

Examples related to twitter-bootstrap

Examples related to carousel