CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Mona Coder
Mona Coder

Reputation: 6316

Adjusting carousel image size on Bootstrap 3

I am trying to find out what I am doing wrong here. My code make the image size shorter than side box on ONLY iPad Landscape (col-md-*) sizes. As you can see I almost have a perfect size for all devices but on ipad landscape view.

Am I doing anything wrong on calculating the image size? Do I have to fix it? Or is there something wrong with my grid setting?

Again testing on Screnfly the image looks good on all devices until 12" and 10" Notepads and iPad landscape. (Of course the problem may continue to all smaller size devices but since I have made the infobox hidden, it is not clear here?)

enter image description here

Here is the code I am using

<div class="well banbox">
    <div class="row">
      <div class="col-lg-9 col-md-9 col-xs-12 banpic">
      <div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src=" http://placehold.it/900x398" alt="">
      <div class="carousel-caption">
        slide 1
      </div>
    </div>
<div class="item">
      <img src="http://placehold.it/900x398" alt="">
      <div class="carousel-caption">
        slide 2
      </div>
    </div>
<div class="item">
      <img src="http://placehold.it/900x398" alt="">
      <div class="carousel-caption">
        slide 3
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
      
      
      
      </div>
  <div class="col-md-3 hidden-sm hidden-xs baninfo">
          <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst1">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">Our Programs</h4>
                    <h6>A Place You Can Trust</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr1"></span>
                </div>
            </div>
        </li>
    </ul>
      <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst2">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">Safe Stay Space</h4>
                    <h6>Ministry of Health</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr2"></span>
                </div>
            </div>
        </li>
    </ul>
          <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst3">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">About Us</h4>
                    <h6>A Place You Can Trust</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr3"></span>
                </div>
            </div>
        </li>
    </ul>
      <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst4">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">Take a Tuor</h4>
                    <h6>Visit Our Daycare online</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr4"></span>
                </div>
            </div>
        </li>
    </ul>
  
  </div>
     
     </div>

      </div>

Upvotes: 2

Views: 6705

Answers (3)

Stephanie Brown
Stephanie Brown

Reputation: 1

I spent a long time trying to figure this one out. Adding the width and height attributes seemed to work for me. The image isn't distorted at all. 

    <div id="myCarousel" class="carousel slide" style="width: 1440px; height:800px; margin: 0 auto">

Good luck

Upvotes: 0

unknown
unknown

Reputation: 1

you could also resize the image in Photoshop or something like that. Thatway all your images can be with the same resolution and you won't have any of these troubles.

Upvotes: 0

Sean Ryan
Sean Ryan

Reputation: 6056

Your issue is that the particular ratio of your image results in it not being tall enough to fill the area it is being placed.

Your image ratio = 900/398 = 2.26 Carousel ratio lg = 848/375 = 2.26 Carousel ratio md = 698/353 = 1.97

Thus, the image too rectangular to fill the space from a height perspective.

Unfortunately, I do not know of any way to fix this without possibly making the image look bad. You would either have to stretch it to fit using javascript, or specify the height of the row and clip it using overflow:hidden.

A third option is to make the image the right height for col-md, and let col-lg people suffer with the image being taller than the nav on the right. This is the solution I would go with.

Upvotes: 1

Related Questions