title: How do I adjust bootstrap carousel to resize images and make images linkable?
body: <p>I'm trying to build my website, and so far have found some answers in this site that have helped me out, but I keep running into some roadblocks.</p>
  
  <p>Currently, I'm making a boot strap carousel and found ways to have the carousel resize the image height using this answer: </p>
  
  <p><a href="https://stackoverflow.com/a/42461191/10654813">https://stackoverflow.com/a/42461191/10654813</a></p>
  
  <pre><code>&lt;head&gt;
  &lt;style&gt;.carousel-inner &gt; .item &gt; img { width:100%; height:570px; } &lt;/style&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>The problem I'm having now, is that images with different widths are stretched out. What code do I need so the width of the images is respected?</p>
  
  <p>Here's the code I'm using:</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;style&gt;.carousel-inner&gt;.item &gt; img {width:100%; height:100%;} &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
      &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
  
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1_60hiP6f26VTAhBtoXmVV1ogtQZW_l4q"&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1NNF4sPI3Z0rieJ4moFnpWM9w-c4TUnIt"&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=14Vn0Qa3jKJ9e0GvOxRlHFAoMJ2ElACbE"&gt;
        &lt;/div&gt;
  
    &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1nIwPiI5pO3lpXaEzddXRdhYMIOznYwBI"&gt;
        &lt;/div&gt;
  
    &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1nVy7T-10TrpYgdFbSZz356SpT9JJWvWS"&gt;
        &lt;/div&gt;
  
    &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1s2CnnBlNDBzR2XuF53wQqt3lMQXS5z8a"&gt;
        &lt;/div&gt;
  
    &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=19uPB4nECcIySfAQ48WwaLtm1jkxMzzQM"&gt;
        &lt;/div&gt;
  
    &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=18eQZcE7U1Sz4xgXJ_jE2uUnudWI6W79O"&gt;
        &lt;/div&gt;
  
   &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=17qqNdGtcLdqnWwl_TAkzZIw-kagBd250"&gt;
        &lt;/div&gt;
  
   &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=15KMQit_RIiHfyLocGO6jwhnmf_lrUPne"&gt;
        &lt;/div&gt;
  
   &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1A3LocibiAvtRj931vPZowZ5hOqmZ9bXu"&gt;
        &lt;/div&gt;
  
   &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1vJrKy2x7Jj2nY5TzuNfw1VPQn7hJXeoM"&gt;
        &lt;/div&gt;
  
   &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1wU2iv5IxUhHallwdzOHXqbwn6ufT-rNx"&gt;
        &lt;/div&gt;
  
   &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1zbCjc0Y1uCiMNLwm-7k7U-q9lMYWoeR6"&gt;
        &lt;/div&gt;
  
   &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1OQ7UnEvXl1pZww9hOJE1LZy-K9x28VY9"&gt;
        &lt;/div&gt;
  
  
   &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1VHLX_7fuu_i0-1zlsYNbJZxTI-RebH7X"&gt;
        &lt;/div&gt;
  
    &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1gml2FIqIddrQGz8gaB8B_ziYb682ko_e"&gt;
        &lt;/div&gt;
  
   &lt;div class="item"&gt;
          &lt;img src="https://drive.google.com/uc?export=view&amp;id=1mrHn0jMeCuXUpQDafcm64fi03Vx7uucw"&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
  
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>