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 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   Here is my code    lt  --                                          -- gt   lt  -- Carousel                                 -- gt   lt  --                                          -- gt   lt div gt       lt div id  myCarousel  class  carousel slide  gt           lt div class  carousel-inner  gt                lt  --Carousel item 1-- gt               lt div class  item active  gt                   lt img src  http   localhost 6054 wp-content themes BLANK-Theme images material ej-manuel png  alt  buffalo-skyline  width  640  height  360    gt                   lt div class  carousel-caption  gt                       lt h4 gt First Thumbnail label lt  h4 gt                           lt p gt 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  lt  p gt                   lt  div gt               lt  div gt                lt  --Carousel item 2-- gt               lt div class  item  gt                   lt img src  http   localhost 6054 wp-content themes BLANK-Theme images material image3 jpg  width  640  height  360    gt                   lt div class  carousel-caption  gt                       lt h4 gt Second Thumbnail label lt  h4 gt                           lt p gt 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  lt  p gt                   lt  div gt               lt  div gt                lt  --Carousel item 3-- gt               lt div class  item  gt                   lt img src  http   localhost 6054 wp-content themes BLANK-Theme images material images jpg  alt  the-buzz-img3  width  640  height  360   gt                   lt div class  carousel-caption  gt                       lt h4 gt Third Thumbnail label lt  h4 gt                       lt p gt 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  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  --                                          -- gt   lt  -- Side Buttons                             -- gt   lt  --                                          -- gt   lt div gt       lt ul class  nav nav-tabs nav-stacked  gt           lt li gt  lt a style  background-color   051223  color   fff  height  90px  width  210px   gt Story 1 lt  a gt  lt  li gt           lt li gt  lt a style  background-color   051223  color   fff  height  90px  width  210px   gt Story 1 lt  a gt  lt  li gt           lt li gt  lt a style  background-color   051223  color   fff  height  90px  width  210px   gt Story 4 lt  a gt  lt  li gt           lt li gt  lt a style  background-color   051223  color   fff  height  90px  width  210px   gt Story 5 lt  a gt  lt  li gt       lt  ul gt   lt  div gt

User · Answer

add this to your css    carousel-inner  gt   item  gt  img   carousel-inner  gt   item  gt  a  gt  img       width  100

User · Answer

replace your image tag with    lt img src  http   localhost 6054 wp-content themes BLANK-Theme images material images jpg  alt  the-buzz-img3   style  width 640px height 360px    gt    use style attribute and make sure there is no css class for image which set image height and width

User · Answer

The reason why your image is resizing which is because it is fluid  You have two ways to do it    Either give a fixed dimension to your image using CSS like    carousel-inner    item   img     width 640px    height 360px    A second way to can do this     carousel     width 640px    height 360px

User · Answer

Put the following code in your CSS  this works with Bootstrap 4    w-100     width  100   important    height  75vh

User · Answer

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   amp  height 100vh     lt img class  d-block w-100  src    alt     gt  use this class in image tags  amp  write following css code in style tags or style css file   carousel-inner  gt   carousel-item  gt  img     height  100vh

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Put the following code into head section in your web page programming    lt head gt     lt style gt  carousel-inner  gt   item  gt  img   width 100   height 570px     lt  style gt   lt  head gt

User · Answer

Give class img-fluid to your div carousel-item Finally it will be    lt div class  carousel-item active img-fluid  gt         lt img class  d-block w-100  src  path to image  alt  First slide  gt   lt  div gt

[css] Bootstrap carousel resizing image

Examples related to css

Examples related to wordpress

Examples related to twitter-bootstrap