Bootstrap carousel not responsive in Chrome and Opera

Question

I have a problem where Bootstrap carousel will stretch or squish my images inside the carousel when resizing the window. It also stretches my image vertically even when width and height attributes match the size of the image.

I have tried every answer on SO without luck such as setting min-width: 100%; to the .carousel img class, so on and so forth. My code is straight from the Bootstrap website and I noticed the images inside of it does the same thing.

The weird thing is that it resizes perfectly to the window in Edge and Firefox. The images within the carousel look just as intended but opening in Chrome and Opera generates something completely different.

Any help is appreciated.

My code is exactly as follows on the Bootstrap website: https://v4-alpha.getbootstrap.com/components/carousel/. I have not added anything extra to it. — Lord Goderick, Feb 22 '17 at 10:38
There must be something diff otherwise your code won't have the difference — XY L, Feb 22 '17 at 11:49

score 2 · Answer 1 · answered Feb 22 '17 at 10:35

2

I think you have specified the height for your Images.

Just make sure to keep height auto and width 100%.

.carousel img{ width:100%; height:auto;}

answered Feb 22 '17 at 10:35

Akshay Bajpei

196
2
9

This unfortunately does not work. My height was at auto. – Lord Goderick Feb 22 '17 at 10:36
have you tried with width:100%; ? – Akshay Bajpei Feb 22 '17 at 10:38
I've tried everything, I may have targeted the wrong class. – Lord Goderick Feb 22 '17 at 10:39
Ok, the attribute `height: 100%` actually helped me fix this issue. Thanks for the helping though. – Lord Goderick Feb 22 '17 at 10:57
Won't it stretched the image in small device ? – Akshay Bajpei Feb 22 '17 at 11:10
It scales well with equal ratio after both height and width are set to 100%. – Lord Goderick Feb 22 '17 at 11:50

score 2 · Answer 2 · answered Feb 22 '17 at 11:50

2

Bootstrap 4 is still in alpha so you can expect some instability. The carousel problem is a known issue in Bootstrap 4.

https://github.com/twbs/bootstrap/issues/21611

answered Feb 22 '17 at 11:50

Carol Skelly

351,302
90
710
624

Yes, indeed. There are inconsistencies here and there. – Lord Goderick Feb 22 '17 at 11:51

score 0 · Answer 3 · edited Feb 22 '17 at 12:00

0

Sounds not that smart, but use the class "img-responsive" on the img tag's?

// Your carousel code ...
<img class="img-responsive .....>
// code ...

Which is equivalent to set the max-width of image to 100%

edited Feb 22 '17 at 12:00

XY L

25,431
14
84
143

answered Feb 22 '17 at 11:39

Kevin Liss

136
1
3
15

Bootstrap carousel not responsive in Chrome and Opera

3 Answers3