title: Fix image and video to same size within container - CSS
body: <p>I am trying to get all of my images and videos to fix there respective containers the same. As you can see from the image they all look different some images and videos fill their contains different from the others making the containers look uneven:</p>
  
  <p><a href="https://i.stack.imgur.com/zBNDM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zBNDM.png" alt="example"></a></p>
  
  <p>I am trying to get them to fit similar to this example:</p>
  
  <p><a href="https://i.stack.imgur.com/U5pLd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U5pLd.png" alt="proper example"></a></p>
  
  <p>Here is the style.css:</p>
  
  <pre><code>/*=== 5.8 EVENT SECTION ===*/
  .eventSection {
    padding-bottom: 70px;
  }
  
  .eventContent {
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    margin-bottom: 30px;
  }
  .eventContent .media-left {
    border-radius: 13px 0 0 13px;
    position: relative;
    width: 100%;
    display: block;
    padding-right: 0;
  }
  @media (min-width: 992px) {
    .eventContent .media-left {
      float: left;
      width: 50%;
      display: inline-block;
      padding-right: 10px;
    }
  }
  .eventContent .media-left img {
    width: 100%;
    box-shadow: none;
  }
  @media (min-width: 768px) {
    .eventContent .media-left img {
      -webkit-box-shadow: 4px 0 0 rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 4px 0 0 rgba(0, 0, 0, 0.1);
      box-shadow: 4px 0 0 rgba(0, 0, 0, 0.1);
    }
  }
  .eventContent .media-body h3 a {
    color: #ffffff;
  }
  .eventContent .media-body .list-unstyled li {
    color: #ffffff;
  }
  .eventContent .media-body p {
    color: #ffffff;
    margin-bottom: 25px;
  }
  @media (min-width: 320px) {
    .eventContent .media-body {
      width: 100%;
      display: block;
      padding: 20px;
    }
  }
  @media (min-width: 992px) {
    .eventContent .media-body {
      padding: 14px 10px 10px 10px;
      display: inline-block;
      float: left;
      width: 50%;
      overflow: visible;
    }
  }
  @media (min-width: 1200px) {
    .eventContent .media-body {
      width: auto;
      display: table-cell;
      padding: 20px 10px 0 20px;
      width: 50%;
    }
  }
  
  .eventContent .list-inline .btn-primary {
    background-color: #ffffff;
    color: #666666;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
  }
  .eventContent .list-inline .btn-primary:hover {
    background-color: #ffffff !important;
  }
  .eventContent .list-inline.btn-yellow .btn-primary:hover {
    color: #f0c24b;
  }
  .eventContent .list-inline.btn-green .btn-primary:hover {
    color: #b5d56a;
  }
  .eventContent .list-inline.btn-red .btn-primary:hover {
    color: #ea7066;
  }
  .eventContent .list-inline.btn-sky .btn-primary:hover {
    color: #84bed6;
  }
  .eventContent .list-inline.btn-purple .btn-primary:hover {
    color: #a597e7;
  }
  .eventContent .list-inline.btn-pink .btn-primary:hover {
    color: #ea77ad;
  }
  
  .sticker-round {
    width: 70px;
    padding: 10px 0;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    background-color: #84bed6;
    display: block;
    text-align: center;
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: #ffffff;
  }
  </code></pre>
  
  <p>Here is the original html for the page:</p>
  
  <pre><code>&lt;!-- WHITE SECTION --&gt;
  &lt;section class="whiteSection full-width clearfix coursesSection" id="latestNews"&gt;
    &lt;div class="container"&gt;
      &lt;div class="sectionTitle text-center"&gt;
        &lt;h2&gt;
          &lt;span class="shape shape-left bg-color-4"&gt;&lt;/span&gt;
          &lt;span&gt;Latest News&lt;/span&gt;
          &lt;span class="shape shape-right bg-color-4"&gt;&lt;/span&gt;
        &lt;/h2&gt;
      &lt;/div&gt;
  
  
  &lt;!-- MAIN SECTION --&gt;
  &lt;section class="mainContent full-width clearfix coursesSection"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-6 col-xs-12 block"&gt;
          &lt;div class="media eventContent bg-color-1"&gt;
            &lt;a class="media-left" href="single-event-left-sidebar.html"&gt;
            &lt;%= image_tag "creative/home/news/Father2Child1.jpg", :class =&gt; "media-object", alt: "Image" %&gt;
            &lt;!--   &lt;img class="media-object" src="img/home/event/event-1.jpg" alt="Image"&gt; --&gt;
            &lt;/a&gt;
            &lt;div class="media-body"&gt;
              &lt;h3 class="media-heading"&gt;&lt;a href="http://www.insidecdcr.ca.gov/2017/02/youthful-offenders-record-stories-for-their-children-at-stockton-youth-correctional-facility/"&gt;Youthful offenders record stories for their children at Stockton youth correctional facility&lt;/a&gt;&lt;/h3&gt;
              &lt;p&gt;It isn’t easy to connect with your child when you spend each day inside O.H. Close Youth Correctional Facility...&lt;/p&gt;
              &lt;ul class="list-inline btn-yellow"&gt;
                &lt;li&gt;&lt;a href="http://www.insidecdcr.ca.gov/2017/02/youthful-offenders-record-stories-for-their-children-at-stockton-youth-correctional-facility/" class="btn btn-primary"&gt;read more&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  &lt;div class="col-sm-6 col-xs-12 block"&gt;
          &lt;div class="media eventContent bg-color-2"&gt;
            &lt;a class="media-left" href="http://www.abc10.com/news/local/reading-program-connects-young-incarcerated-dads-to-their-kids/397029763"&gt;
             &lt;%= image_tag "creative/home/news/Father2Child8.jpg", :class =&gt; "media-object", alt: "Image" %&gt;
  
            &lt;/a&gt;
            &lt;div class="media-body"&gt;
              &lt;h3 class="media-heading"&gt;&lt;a href="http://www.thecalifornian.com/story/news/2017/08/03/week-they-werent-just-felons-they-were-fathers/526770001/"&gt;For a week, they weren't just felons -- they were fathers
  &lt;/a&gt;&lt;/h3&gt;
              &lt;p&gt;For 11 years, Kamorrie Randle has only known his son Jackson through phone calls and visits to Salinas Valley State Prison&lt;/p&gt;
              &lt;ul class="list-inline btn-green"&gt;
                &lt;li&gt;&lt;a href="http://www.thecalifornian.com/story/news/2017/08/03/week-they-werent-just-felons-they-were-fathers/526770001/" class="btn btn-primary"&gt;read more&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-sm-6 col-xs-12 block"&gt;
          &lt;div class="media eventContent bg-color-2"&gt;
            &lt;a class="media-left" href="http://www.abc10.com/news/local/reading-program-connects-young-incarcerated-dads-to-their-kids/397029763"&gt;
             &lt;%= image_tag "creative/home/news/Father2Child2.jpg", :class =&gt; "media-object", alt: "Image" %&gt;
  
            &lt;/a&gt;
            &lt;div class="media-body"&gt;
              &lt;h3 class="media-heading"&gt;&lt;a href="http://www.insidecdcr.ca.gov/2017/06/still-dads-actor-shares-story-of-hope-at-valley-state-prison/"&gt;Still dads: Actor shares story of hope at Valley State Prison
  &lt;/a&gt;&lt;/h3&gt;
              &lt;p&gt;On Father’s Day and all year long, organizations like the Place4Grace are working... &lt;/p&gt;
              &lt;ul class="list-inline btn-green"&gt;
                &lt;li&gt;&lt;a href="http://www.insidecdcr.ca.gov/2017/06/still-dads-actor-shares-story-of-hope-at-valley-state-prison/" class="btn btn-primary"&gt;read more&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-sm-6 col-xs-12 block"&gt;
          &lt;div class="media eventContent bg-color-3"&gt;
            &lt;a class="media-left" href="http://www.huffingtonpost.com/entry/google-helps-kids-read-loveletters-incarcerated-dads-prison-jail-fathers-day_us_57681341e4b0fbbc8beb0a1c?ir=Black+Voices&amp;section=us_black-voices&amp;utm_hp_ref=black-voices&amp;ncid=fcbklnkushpmg00000047"&gt;
              &lt;div style="position:relative;height:0;padding-bottom:56.25%"&gt;&lt;iframe src="https://www.youtube.com/embed/51Aw_eKKAzw?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;
            &lt;/a&gt;
            &lt;div class="media-body"&gt;
              &lt;h3 class="media-heading"&gt;&lt;a href="http://www.huffingtonpost.com/entry/google-helps-kids-read-loveletters-incarcerated-dads-prison-jail-fathers-day_us_57681341e4b0fbbc8beb0a1c?ir=Black+Voices&amp;section=us_black-voices&amp;utm_hp_ref=black-voices&amp;ncid=fcbklnkushpmg00000047"&gt;Watch Kids Read Moving Love Letters To Their Incarcerated Dads&lt;/a&gt;&lt;/h3&gt;
              &lt;p&gt;It was difficult for some of the 2.7 million kids in the U.S. who have an incarcerated parent... &lt;/p&gt;
              &lt;ul class="list-inline btn-red"&gt;
                &lt;li&gt;&lt;a href="http://www.huffingtonpost.com/entry/google-helps-kids-read-loveletters-incarcerated-dads-prison-jail-fathers-day_us_57681341e4b0fbbc8beb0a1c?ir=Black+Voices&amp;section=us_black-voices&amp;utm_hp_ref=black-voices&amp;ncid=fcbklnkushpmg00000047" class="btn btn-primary"&gt;read more&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-sm-6 col-xs-12 block"&gt;
          &lt;div class="media eventContent bg-color-4"&gt;
            &lt;a class="media-left" href="http://www.insidecdcr.ca.gov/2014/12/camp-grace-reunites-children-with-incarcerated-fathers-at-calipatria/"&gt;
              &lt;%= image_tag "creative/home/news/camp-grace-CDCR-25.jpg", :class =&gt; "media-object", alt: "Image" %&gt;
            &lt;/a&gt;
            &lt;div class="media-body"&gt;
              &lt;h3 class="media-heading"&gt;&lt;a href="http://www.insidecdcr.ca.gov/2014/12/camp-grace-reunites-children-with-incarcerated-fathers-at-calipatria/"&gt;Camp Grace reunites children with incarcerated fathers at Calipatria&lt;/a&gt;&lt;/h3&gt;
              &lt;p&gt;Ten kids got the chance to spend quality time with their fathers recently in a very special day camp – Camp Grace, which brought kids...&lt;/p&gt;
              &lt;ul class="list-inline btn-sky"&gt;
                &lt;li&gt;&lt;a href="http://www.insidecdcr.ca.gov/2014/12/camp-grace-reunites-children-with-incarcerated-fathers-at-calipatria/" class="btn btn-primary"&gt;read more&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-sm-6 col-xs-12 block"&gt;
          &lt;div class="media eventContent bg-color-5"&gt;
            &lt;a class="media-left" href="http://www.insidecdcr.ca.gov/2016/07/messages-of-love-incarcerated-dads-record-audiobooks-for-their-children/"&gt;
              &lt;%= image_tag "creative/home/news/Father2Child4.jpg", :class =&gt; "media-object", alt: "Image" %&gt;
            &lt;/a&gt;
            &lt;div class="media-body"&gt;
              &lt;h3 class="media-heading"&gt;&lt;a href="http://www.insidecdcr.ca.gov/2016/07/messages-of-love-incarcerated-dads-record-audiobooks-for-their-children/"&gt;Messages of love: Incarcerated dads record audiobooks for their children at High Desert SP&lt;/a&gt;&lt;/h3&gt;
              &lt;p&gt;The soothing sound of a parent’s voice is a source of comfort for children throughout the world, and one organization is helping...&lt;/p&gt;
              &lt;ul class="list-inline btn-purple"&gt;
                &lt;li&gt;&lt;a href="http://www.insidecdcr.ca.gov/2016/07/messages-of-love-incarcerated-dads-record-audiobooks-for-their-children/" class="btn btn-primary"&gt;read more&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-sm-6 col-xs-12 block"&gt;
          &lt;div class="media eventContent bg-color-6"&gt;
            &lt;a class="media-left" href="http://www.insidecdcr.ca.gov/2013/05/csp-program-allow-inmates-to-read-for-their-kids/"&gt;
              &lt;%= image_tag "creative/home/news/Father2Child5.jpg", :class =&gt; "media-object", alt: "Image" %&gt;
            &lt;/a&gt;
            &lt;div class="media-body"&gt;
              &lt;h3 class="media-heading"&gt;&lt;a href="http://www.insidecdcr.ca.gov/2013/05/csp-program-allow-inmates-to-read-for-their-kids/"&gt;CSP program allow inmates to read for their kids&lt;/a&gt;&lt;/h3&gt;
              &lt;p&gt;The Second Annual Place4Grace’s Father2Child Literacy Project, a program that helps inmates encourage their children to read... &lt;/p&gt;
              &lt;ul class="list-inline btn-pink"&gt;
                &lt;li&gt;&lt;a href="http://www.insidecdcr.ca.gov/2013/05/csp-program-allow-inmates-to-read-for-their-kids/" class="btn btn-primary"&gt;read more&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-sm-6 col-xs-12 block"&gt;
          &lt;div class="media eventContent bg-color-1"&gt;
            &lt;a class="media-left" href="https://www.facebook.com/cacorrections/videos/10154857717907061/"&gt;
              &lt;%= image_tag "creative/home/news/Father2Child9.jpg", :class =&gt; "media-object", alt: "Image" %&gt;
            &lt;/a&gt;
            &lt;div class="media-body"&gt;
              &lt;h3 class="media-heading"&gt;&lt;a href="http://www.insidecdcr.ca.gov/2013/05/csp-program-allow-inmates-to-read-for-their-kids/"&gt;Facebook Video of Camp Grace&lt;/a&gt;&lt;/h3&gt;
              &lt;p&gt;We are LIVE at Salinas Valley State Prison in Soledad with The Place4Grace.org at Camp Grace, a five-day program in which...&lt;/p&gt;
              &lt;ul class="list-inline btn-pink"&gt;
                &lt;li&gt;&lt;a href="https://www.facebook.com/cacorrections/videos/10154857717907061/" class="btn btn-primary"&gt;Watch Stream&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I just need some suggestions as to how I can get this to work so all of the boxes are the same size and the images and videos are filling in the same as the correct example.</p>