How do I adjust bootstrap carousel to resize images and make images linkable?

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.

Currently, I'm making a boot strap carousel and found ways to have the carousel resize the image height using this answer:

https://stackoverflow.com/a/42461191/10654813

<head>
<style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>

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?

Here's the code I'm using:

  <!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>.carousel-inner>.item > img {width:100%; height:100%;} </style>
</head>
<body>

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">


    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://drive.google.com/uc?export=view&id=1_60hiP6f26VTAhBtoXmVV1ogtQZW_l4q">
      </div>

      <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1NNF4sPI3Z0rieJ4moFnpWM9w-c4TUnIt">
      </div>

      <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=14Vn0Qa3jKJ9e0GvOxRlHFAoMJ2ElACbE">
      </div>

  <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1nIwPiI5pO3lpXaEzddXRdhYMIOznYwBI">
      </div>

  <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1nVy7T-10TrpYgdFbSZz356SpT9JJWvWS">
      </div>

  <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1s2CnnBlNDBzR2XuF53wQqt3lMQXS5z8a">
      </div>

  <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=19uPB4nECcIySfAQ48WwaLtm1jkxMzzQM">
      </div>

  <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=18eQZcE7U1Sz4xgXJ_jE2uUnudWI6W79O">
      </div>

 <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=17qqNdGtcLdqnWwl_TAkzZIw-kagBd250">
      </div>

 <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=15KMQit_RIiHfyLocGO6jwhnmf_lrUPne">
      </div>

 <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1A3LocibiAvtRj931vPZowZ5hOqmZ9bXu">
      </div>

 <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1vJrKy2x7Jj2nY5TzuNfw1VPQn7hJXeoM">
      </div>

 <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1wU2iv5IxUhHallwdzOHXqbwn6ufT-rNx">
      </div>

 <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1zbCjc0Y1uCiMNLwm-7k7U-q9lMYWoeR6">
      </div>

 <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1OQ7UnEvXl1pZww9hOJE1LZy-K9x28VY9">
      </div>


 <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1VHLX_7fuu_i0-1zlsYNbJZxTI-RebH7X">
      </div>

  <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1gml2FIqIddrQGz8gaB8B_ziYb682ko_e">
      </div>

 <div class="item">
        <img src="https://drive.google.com/uc?export=view&id=1mrHn0jMeCuXUpQDafcm64fi03Vx7uucw">
      </div>

    </div>


    </a>
  </div>
</div>

</body>
</html>

Solution

Changing width: 100% to max-width: 100% should do the trick.

.carousel-inner > .item > img {
    max-width: 100%;
    height: 570px;
}