Responsive Carousel v4-alpha6, Solution option 2, carousel 2, with the suggestion of @DeltaOS2

Responsive Carousel does not work with browsers: Chrome, Opera and Vivaldi. The hight stays at real picture hight.

by Jos Maissan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<main id="main">
  <div class="container">

    <!-- Carousel -->
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img class="d-block img-fluid" src="http://jossan.home.xs4all.nl/fotos/vlaardingen/img/IMG_2508v-1500x500.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block img-fluid" src="http://jossan.home.xs4all.nl/fotos/andere_plaatsen/img/IMG_0439_1500x500v.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block img-fluid" src="http://jossan.home.xs4all.nl/fotos/rotterdam/img/IMG_9237_1500x500.jpg" alt="Third slide">
        </div>
      </div>
    </div>
    <!-- /Carousel -->

  </div>
  <p class="text-center">
    width x height = 3 x 1
  </p>
</main>
<!-- main -->

CSS

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

JavaScript

! function($) {
  $(function() {
    // carousel
    $('#carousel-1').carousel()
  })
}(window.jQuery)