title: Trying to prevent images being stretched within a bootstrap carousel
body: <p>I have a bootstrap 4 carousel that is taking up a good portion of the page. The images are appended through an ajax request once received.</p>
  
  <p>All the photos are taken on the phone, so they are either landscape or portrait style.</p>
  
  <p>bootstrap carousel either stretches the image out too far and the image extends beyond the limit of my div or they appear stretched and skews the quality of the photo. Is there a way to set a limit to the image and adjust it on the fly so each unique photo fits my div?</p>
  
  <p>css for the div that contains my carosuel:</p>
  
  <pre><code>#right_curtain {
      z-index: 1;
      position: fixed;
      left: 20%;
      width: 80%;
      height: 100%
  
      }
  </code></pre>
  
  <p>my div for  the carosuel:</p>
  
  <pre><code>&lt;div id="right_curtain"  &gt;
  
  
  &lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style ="z-index: 0"&gt;
  
      &lt;ol class="carousel-indicators"&gt;
  
      &lt;/ol&gt;
      &lt;div class="carousel-inner"&gt;
  
      &lt;/div&gt;
      &lt;a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"&gt;
          &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"&gt;
          &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the javascript that appends an image to the carosuel</p>
  
  <pre><code>            for (i = 0; i &lt; count; i++) {
                  buttonJSON += '&lt;button type="button" class="list-group-item list-group-item-action" id = "buttonList'+i+'"onclick=listClick(this) data-value ="'+json[i].id+'"&gt;&lt;b&gt;'+json[i].department.replace("_"," ")+'&lt;/b&gt;&lt;br&gt;&lt;b&gt;ADDRESS&lt;/b&gt;: '+json[i].address+'&lt;br&gt;&lt;b&gt;TYPE&lt;/b&gt;: '+json[i].type+'&lt;br&gt;&lt;b&gt;USER&lt;/b&gt;: '+json[i].user+'&lt;/button&gt;';
                  if(i ===0){
                      $('.carousel-indicators').append($('&lt;li data-target="#carouselExampleIndicators" class="active"&gt; data-slide-to="'+i+' "&gt;&lt;/li&gt;'));
                      $('.carousel-inner').append($('&lt;div class="carousel-item active"&gt; &lt;img class="d-block w-100" src="'  + json[i].link + '" alt="'+json[i].id+'"  data-value ="'+json[i].id+'" &gt;&lt;/div&gt;'));
                  }else{
                      $('.carousel-indicators').append($('&lt;li data-target="#carouselExampleIndicators" data-slide-to="'+i+'"&gt;&lt;/li&gt;'));
                      $('.carousel-inner').append($('&lt;div class="carousel-item"&gt; &lt;img id = "image'+i+'"class="d-block w-100" src="'  + json[i].link  + '" alt="'+json[i].id+'" data-value ="'+json[i].id+'"   &gt;&lt;/div&gt;'));
                  }
              }
  </code></pre>