修复图像和视频到容器内相同的大小 - CSS

我想让所有的图像和视频修复相应的容器相同。正如你可以从图片看，他们都期待不同的一些图片和视频填补其包含使容器和别人不同显得不均匀：修复图像和视频到容器内相同的大小 - CSS

我试图让他们适应类似这样的例子：

这里是style.css中：

/*=== 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; 
}

这里该页面的原始HTML：

<!-- WHITE SECTION --> 
<section class="whiteSection full-width clearfix coursesSection" id="latestNews"> 
    <div class="container"> 
    <div class="sectionTitle text-center"> 
     <h2> 
     <span class="shape shape-left bg-color-4"></span> 
     <span>Latest News</span> 
     <span class="shape shape-right bg-color-4"></span> 
     </h2> 
    </div> 


<!-- MAIN SECTION --> 
<section class="mainContent full-width clearfix coursesSection"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 col-xs-12 block"> 
     <div class="media eventContent bg-color-1"> 
      <a class="media-left" href="single-event-left-sidebar.html"> 
      <%= image_tag "creative/home/news/Father2Child1.jpg", :class => "media-object", alt: "Image" %> 
      <!-- <img class="media-object" src="img/home/event/event-1.jpg" alt="Image"> --> 
      </a> 
      <div class="media-body"> 
      <h3 class="media-heading"><a href="http://www.insidecdcr.ca.gov/2017/02/youthful-offenders-record-stories-for-their-children-at-stockton-youth-correctional-facility/">Youthful offenders record stories for their children at Stockton youth correctional facility</a></h3> 
      <p>It isn’t easy to connect with your child when you spend each day inside O.H. Close Youth Correctional Facility...</p> 
      <ul class="list-inline btn-yellow"> 
       <li><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">read more</a></li> 
      </ul> 
      </div> 
     </div> 

     </div> 
<div class="col-sm-6 col-xs-12 block"> 
     <div class="media eventContent bg-color-2"> 
      <a class="media-left" href="http://www.abc10.com/news/local/reading-program-connects-young-incarcerated-dads-to-their-kids/397029763"> 
      <%= image_tag "creative/home/news/Father2Child8.jpg", :class => "media-object", alt: "Image" %> 

      </a> 
      <div class="media-body"> 
      <h3 class="media-heading"><a href="http://www.thecalifornian.com/story/news/2017/08/03/week-they-werent-just-felons-they-were-fathers/526770001/">For a week, they weren't just felons -- they were fathers 
</a></h3> 
      <p>For 11 years, Kamorrie Randle has only known his son Jackson through phone calls and visits to Salinas Valley State Prison</p> 
      <ul class="list-inline btn-green"> 
       <li><a href="http://www.thecalifornian.com/story/news/2017/08/03/week-they-werent-just-felons-they-were-fathers/526770001/" class="btn btn-primary">read more</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 

     <div class="col-sm-6 col-xs-12 block"> 
     <div class="media eventContent bg-color-2"> 
      <a class="media-left" href="http://www.abc10.com/news/local/reading-program-connects-young-incarcerated-dads-to-their-kids/397029763"> 
      <%= image_tag "creative/home/news/Father2Child2.jpg", :class => "media-object", alt: "Image" %> 

      </a> 
      <div class="media-body"> 
      <h3 class="media-heading"><a href="http://www.insidecdcr.ca.gov/2017/06/still-dads-actor-shares-story-of-hope-at-valley-state-prison/">Still dads: Actor shares story of hope at Valley State Prison 
</a></h3> 
      <p>On Father’s Day and all year long, organizations like the Place4Grace are working... </p> 
      <ul class="list-inline btn-green"> 
       <li><a href="http://www.insidecdcr.ca.gov/2017/06/still-dads-actor-shares-story-of-hope-at-valley-state-prison/" class="btn btn-primary">read more</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 

     <div class="col-sm-6 col-xs-12 block"> 
     <div class="media eventContent bg-color-3"> 
      <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&section=us_black-voices&utm_hp_ref=black-voices&ncid=fcbklnkushpmg00000047"> 
      <div style="position:relative;height:0;padding-bottom:56.25%"><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></iframe></div> 
      </a> 
      <div class="media-body"> 
      <h3 class="media-heading"><a href="http://www.huffingtonpost.com/entry/google-helps-kids-read-loveletters-incarcerated-dads-prison-jail-fathers-day_us_57681341e4b0fbbc8beb0a1c?ir=Black+Voices&section=us_black-voices&utm_hp_ref=black-voices&ncid=fcbklnkushpmg00000047">Watch Kids Read Moving Love Letters To Their Incarcerated Dads</a></h3> 
      <p>It was difficult for some of the 2.7 million kids in the U.S. who have an incarcerated parent... </p> 
      <ul class="list-inline btn-red"> 
       <li><a href="http://www.huffingtonpost.com/entry/google-helps-kids-read-loveletters-incarcerated-dads-prison-jail-fathers-day_us_57681341e4b0fbbc8beb0a1c?ir=Black+Voices&section=us_black-voices&utm_hp_ref=black-voices&ncid=fcbklnkushpmg00000047" class="btn btn-primary">read more</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 

     <div class="col-sm-6 col-xs-12 block"> 
     <div class="media eventContent bg-color-4"> 
      <a class="media-left" href="http://www.insidecdcr.ca.gov/2014/12/camp-grace-reunites-children-with-incarcerated-fathers-at-calipatria/"> 
      <%= image_tag "creative/home/news/camp-grace-CDCR-25.jpg", :class => "media-object", alt: "Image" %> 
      </a> 
      <div class="media-body"> 
      <h3 class="media-heading"><a href="http://www.insidecdcr.ca.gov/2014/12/camp-grace-reunites-children-with-incarcerated-fathers-at-calipatria/">Camp Grace reunites children with incarcerated fathers at Calipatria</a></h3> 
      <p>Ten kids got the chance to spend quality time with their fathers recently in a very special day camp – Camp Grace, which brought kids...</p> 
      <ul class="list-inline btn-sky"> 
       <li><a href="http://www.insidecdcr.ca.gov/2014/12/camp-grace-reunites-children-with-incarcerated-fathers-at-calipatria/" class="btn btn-primary">read more</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 

     <div class="col-sm-6 col-xs-12 block"> 
     <div class="media eventContent bg-color-5"> 
      <a class="media-left" href="http://www.insidecdcr.ca.gov/2016/07/messages-of-love-incarcerated-dads-record-audiobooks-for-their-children/"> 
      <%= image_tag "creative/home/news/Father2Child4.jpg", :class => "media-object", alt: "Image" %> 
      </a> 
      <div class="media-body"> 
      <h3 class="media-heading"><a href="http://www.insidecdcr.ca.gov/2016/07/messages-of-love-incarcerated-dads-record-audiobooks-for-their-children/">Messages of love: Incarcerated dads record audiobooks for their children at High Desert SP</a></h3> 
      <p>The soothing sound of a parent’s voice is a source of comfort for children throughout the world, and one organization is helping...</p> 
      <ul class="list-inline btn-purple"> 
       <li><a href="http://www.insidecdcr.ca.gov/2016/07/messages-of-love-incarcerated-dads-record-audiobooks-for-their-children/" class="btn btn-primary">read more</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 

     <div class="col-sm-6 col-xs-12 block"> 
     <div class="media eventContent bg-color-6"> 
      <a class="media-left" href="http://www.insidecdcr.ca.gov/2013/05/csp-program-allow-inmates-to-read-for-their-kids/"> 
      <%= image_tag "creative/home/news/Father2Child5.jpg", :class => "media-object", alt: "Image" %> 
      </a> 
      <div class="media-body"> 
      <h3 class="media-heading"><a href="http://www.insidecdcr.ca.gov/2013/05/csp-program-allow-inmates-to-read-for-their-kids/">CSP program allow inmates to read for their kids</a></h3> 
      <p>The Second Annual Place4Grace’s Father2Child Literacy Project, a program that helps inmates encourage their children to read... </p> 
      <ul class="list-inline btn-pink"> 
       <li><a href="http://www.insidecdcr.ca.gov/2013/05/csp-program-allow-inmates-to-read-for-their-kids/" class="btn btn-primary">read more</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 

     <div class="col-sm-6 col-xs-12 block"> 
     <div class="media eventContent bg-color-1"> 
      <a class="media-left" href="https://www.facebook.com/cacorrections/videos/10154857717907061/"> 
      <%= image_tag "creative/home/news/Father2Child9.jpg", :class => "media-object", alt: "Image" %> 
      </a> 
      <div class="media-body"> 
      <h3 class="media-heading"><a href="http://www.insidecdcr.ca.gov/2013/05/csp-program-allow-inmates-to-read-for-their-kids/">Facebook Video of Camp Grace</a></h3> 
      <p>We are LIVE at Salinas Valley State Prison in Soledad with The Place4Grace.org at Camp Grace, a five-day program in which...</p> 
      <ul class="list-inline btn-pink"> 
       <li><a href="https://www.facebook.com/cacorrections/videos/10154857717907061/" class="btn btn-primary">Watch Stream</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 

    </div> 
</section> 
</section>

我只是需要一些建议，我怎么能得到这个工作，让所有的箱子都相同的大小和图像和视频都在同一个填充为正确的例。

来源

2017-09-23 Jermaine Subia

你试过CSS flex吗？ https://developer.mozilla.org/en-US/docs/Web/CSS/flex –

还没有尝试过，但我会检查出来 –