Bootstrap carousel resizing image

2 Views

Hi I am trying to make a carousel on my wordpress website with bootstrap. I would like to put four block links next to it. I have the blocks there and the images are scrolling fine, However I believe the carousel is changing the height of the image.

I have images (640 x 360) and I made the 4 blocks 90 pixels high. I did this so the blocks would be flush with the bottom of the carousel. Except the blocks are too big. I don’t understand what the problem could be. And I have searched through all of the CSS.

Read More

Here is my code: 

<!--==========================================-->
<!-- Carousel                                 -->
<!--==========================================-->
<div>
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">

            <!--Carousel item 1-->
            <div class="item active">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />
                <div class="carousel-caption">
                    <h4>First Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

            <!--Carousel item 2-->
            <div class="item">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />
                <div class="carousel-caption">
                    <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

            <!--Carousel item 3-->
            <div class="item">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >
                <div class="carousel-caption">
                    <h4>Third Thumbnail label</h4>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div>
</div>

<!--==========================================-->
<!-- Side Buttons                             -->
<!--==========================================-->
<div>
    <ul class="nav nav-tabs nav-stacked">
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>
    </ul>
</div>
Post Views: 2

Related posts

Leave a Reply

12 comments

  1. The reason why your image is resizing which is because it is fluid. You have two ways to do it:

    1. Either give a fixed dimension to your image using CSS like:

      .carousel-inner > .item > img {
  width:640px;
  height:360px;
}

    2. A second way to can do this: 

      .carousel {
  width:640px;
  height:360px;
}

  4. I had the same problem. You have to use all the images with same height and width. you can simply change it using paint application from windows using the resize option in the home section and then use CSS to resize the image. Maybe this problem occurs because the the width and height attribute inside the tag is not responding.

  5. Put the following code into head section in your web page programming.

    <head>
  <style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>

  6. replace your image tag with 

    <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3"  style="width:640px;height:360px" />

    use style attribute and make sure there is no css class for image which set image height and width

  7. Use this code to set height of the image slider to the full screen / upto 100 view port height. This will helpful when using bootstrap carousel theme slider.
    I face some issue with height the i use following classes to set image width 100% & height 100vh.

    <img class="d-block w-100" src="" alt="" > use this class in image tags & write following css code in style tags or style.css file

    .carousel-inner > .carousel-item > img {
  height: 100vh;
}

  8. Give class img-fluid to your div carousel-item.Finally it will be:

    <div class="carousel-item active img-fluid">
      <img class="d-block w-100" src="path to image" alt="First slide">
</div>

  9. This worked for me, max-height allows the images to auto adjust instead of cropping them

        <div class="carousel-item">
      <img src="image-link" class="d-block w-100" alt="image" style="max-height:100vh;">
    </div>

  10. Had the same problem and none of the CSS solutions presented here worked.

    What worked for me was setting up a height=”360″ without setting any width. My photos aren’t the same size and like this they have room to adjust their with but keep the height fixed.

  12. i had this issue years back..but I got this. All you need to do is set the width and the height of the image to whatever you want..what i mean is your image in your carousel inner …don’t add the style attribut like “style:”(no not this) but something like this and make sure your codes ar correct its gonna work…Good luck