Bootstrap carousel resizing image

Question

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 scrolli

Answer 1

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

Answer 2

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.

Answer 3

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>

Answer 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.

Answer 5

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;
}

Answer 6

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;
   }