9

Look at this: http://www.consultacultura.it/portale_comunale_della_cultura.asp?IDcomune=1

Carousel images are not responsive like images under of it. They have the same class img-fluid.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Sergio
  • 93
  • 1
  • 5

2 Answers2

10

This is a known issue in Bootstrap 4 Alpha 6...

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

As a workaround you can use..

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

http://www.codeply.com/go/0QUU06MiIL

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • I correct myself ... the problem is with chrome only the other browser are ok. About display:block; it make the image responsive but corrupt the slideshow (all images are show at the same time) – Sergio Jan 19 '17 at 08:01
  • It should only be applied to the active item as described. http://www.codeply.com/go/0QUU06MiIL – Carol Skelly Jan 19 '17 at 12:03
  • Thank you, also with style="width:100%; height:100%" as described in issue 21611 from github works correctly. To be my first time on stackoverflow i'm very satisfied! – Sergio Jan 20 '17 at 13:46
2

For me that workaround did not work for both, desktops and mobiles. I adjusted the proposed workaround a bit to make it -orientation- sensible.

@media (orientation: portrait) { 
    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
        display: block;
        width:100%;
        height:auto;
    }
}

@media (orientation: landscape) { 
    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
        display: block;
        width:100%;
        height:96vh;
    }
}
zx485
  • 28,498
  • 28
  • 50
  • 59
ben Thijssen
  • 61
  • 6