title: How to resize images properly on boostrap carousel
body: <p>I cannot get these images chopped down to fit properly in the carousel. I think this line needs to be edited somehow: 
  
  <p>IGNORE:
  It is telling me to add more detail so im typing extra things to by pass it like a bad person would take the easy way out and not add actual info but rather some bs that adds no value to the post</p>
  
  <p>Heres my shittily written code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Bootstrap Example&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.2.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;/head&gt;
  &lt;body&gt;
  &lt;style&gt;
  h1{
      color: aqua;
      font-size: 40px;
      text-align: center;
      font-style: italic; 
  
  } 
  
  
  &lt;/style&gt;
  
  &lt;!-- this creates the menu --&gt;
  &lt;nav class="navbar navbar-default"&gt;
  &lt;div class="container-fluid"&gt;
  &lt;div class="navbar-header"&gt;
  &lt;a class="navbar-brand" href="#"&gt;Mason Cox&lt;/a&gt;
  &lt;/div&gt;
   &lt;ul class="nav navbar-nav"&gt;
    &lt;li&gt;&lt;a href="Cox_Mason_jumbotron.html"&gt;Jumbotron&lt;/a&gt;&lt;/li&gt;
    &lt;li class="active"&gt;&lt;a href="Cox_Mason_carousel.html"&gt;Carousel&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="Cox_Mason_responsive_table.html"&gt;Table&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/nav&gt;
  &lt;!--this is the heading--&gt;
  &lt;h1&gt;Mason Cox&lt;/h1&gt;
  
  &lt;!--this is the carousel--&gt;
  &lt;div class="container"&gt;
  &lt;h2&gt;Friends and I Carousel&lt;/h2&gt;  
  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
  &lt;!-- Indicators --&gt;
  &lt;ol class="carousel-indicators"&gt;
    &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
    &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
    &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
    &lt;li data-target="#myCarousel" data-slide-to="4"&gt;&lt;/li&gt;
  &lt;li data-target="#myCarousel" data-slide-to="5"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  
  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="item active"&gt;
      &lt;img src="leahandi.jpg" alt="dance"  style="width:75%;" 
     style="height:25%;"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;My girlfriend and I at a dance.&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;img src="padre.png" alt="padre" style="width:100%;"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;Friends and I at a bar in South Padre&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;img src="homepage.PNG" alt="oldpic" style="width:100%;"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;A picture of me frshman year&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
      &lt;div class="item"&gt;
      &lt;img src="tailgate.jpg" alt="tailgate" style="width:100%;"&gt;
          &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;My girlfriend and I at a tailgate.&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;img src="me.PNG" alt="topgolf" style="width:100%;"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;A picture of me at Top Golf&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;img src="friends.JPG" alt="friend group" style="width:100%;"&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;A picture of friends and I from last year&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Left and right controls --&gt;
  &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
    &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
    &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>