title: How to make Bootstrap 4 carousel images responsive?
body: <p>Hopfully the title and the demo say it all. The new carousel of Bootstrap 4 isn't responsive. The images are out of their aspect ratio.</p>
  
  <p>Does somebody know how to solve this without doing major adjustments in the css and html?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    max-width:200px;
    width:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="wrapper"&gt;
  &lt;div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="carousel-item active"&gt;
        &lt;img class="d-block img-fluid" src="https://placehold.it/400x200" alt="First slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Second slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Third slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>