列内の4：3画像の切り抜き画像

Question

Flexboxを使用して3列のレイアウトを作成しました。各列の幅は31.3％です。次に、各列には、その列の幅の100％を占めるイメージが含まれます。固定幅がないので、4：3のアスペクト比で画像を切り抜き、サイズを変更するのに苦労しています。

これは私の構造体である：

<div id="events-cont"> 
    <div class="events-row"> 
    <div class="event-card"> 
     <div class="event-card-img"> 
     <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=600&h=300" /></a> 
     </div> 
     <div class="event-card-info"> 
     <h1>Event title</h1> 
     <h2>Event date</h2> 
     <h2>Event venue</h2> 
     <p> 
      Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
      <a href="#">Learn More <span class="chevron right"></span></a> 
     </p> 
     <div class="button-cont"> 
      <a class="button blue-button" href="#">Buy Tickets</a> 
     </div> 
     </div> 
    </div> 
    <div class="event-card"> 
     <div class="event-card-img"> 
     <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=600&h=300" /></a> 
     <div class="series-caption">Series title</div> 
     </div> 
     <div class="event-card-info"> 
     <h1>Event title</h1> 
     <h2>Event date</h2> 
     <h2>Event venue</h2> 
     <p> 
      Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
      <a href="#">Learn More <span class="chevron right"></span></a> 
     </p> 
     </div> 
    </div> 
    <div class="event-card"> 
     <div class="event-card-img"> 
     <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=600&h=300" /></a> 
     <div class="series-caption">Series title</div> 
     </div> 
     <div class="event-card-info"> 
     <h1>Event title</h1> 
     <h2>Event date</h2> 
     <h2>Event venue</h2> 
     <p> 
      Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
      <a href="#">Learn More <span class="chevron right"></span></a> 
     </p> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.events-row { 
    display: flex; 
    justify-content: space-around; 
    padding-bottom: 30px; 
} 

.events-row .event-card { 
    background-color: #666; 
    flex-basis: 31.3%; 
} 

.events-row .event-card .event-card-img { 
    position: relative; 
    height: 295px; 
} 

.events-row .event-card .event-card-img:hover { 
    opacity: 0.5; 
} 

.events-row .event-card .event-card-img img { 
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 

.events-row .event-card .event-card-img .series-caption { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 5px 10px; 
    font-size: 1.5em; 
    color: white; 
    background-color: black; 
} 

.events-row .event-card .event-card-info { 
    padding: 15px; 
    text-align: left; 
    color: #333; 
} 

.events-row .event-card .event-card-info h1 { 
    font-size: 2.5em; 
    color: black; 
} 

.events-row .event-card .event-card-info h2 { 
    line-height: 1.5; 
} 

.events-row .event-card .event-card-info p { 
    padding: 15px 0; 
    font-size: 1.75em; 
} 

.events-row .event-card .event-card-info p a { 
    font-size: 1.1em; 
} 

.events-row .event-card .event-card-info .button-cont { 
    text-align: center; 
} 

.events-row .event-card .event-card-info .button-cont .button { 
    display: inline-block; 
    margin: 30px; 
    padding: 10px 30px; 
    font-size: 1.8em; 
} 

ペン：http://codepen.io/ourcore/pen/NbOwaV。ここで

Answer 1

は、jQueryのソリューションです：http://codepen.io/blainerw/pen/XNxEpd

マークアップ（HTML）は同じです。

CSSは少し異なります。私は.events-row .event-card .event-card-imgと.events-row .event-card .event-card-img imgから高さを取り除いた。

.events-row { 
    display: flex; 
    justify-content: space-around; 
    padding-bottom: 30px; 
} 

.events-row .event-card { 
    background-color: #666; 
    flex-basis: 31.3%; 
} 

.events-row .event-card .event-card-img { 
    position: relative; 
} 

.events-row .event-card .event-card-img:hover { 
    opacity: 0.5; 
} 

.events-row .event-card .event-card-img img { 
    display: block; 
    width: 100%; 
    object-fit: cover; 
} 

.events-row .event-card .event-card-img .series-caption { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 5px 10px; 
    font-size: 1.5em; 
    color: white; 
    background-color: black; 
} 

.events-row .event-card .event-card-info { 
    padding: 15px; 
    text-align: left; 
    color: #333; 
} 

.events-row .event-card .event-card-info h1 { 
    font-size: 2.5em; 
    color: black; 
} 

.events-row .event-card .event-card-info h2 { 
    line-height: 1.5; 
} 

.events-row .event-card .event-card-info p { 
    padding: 15px 0; 
    font-size: 1.75em; 
} 

.events-row .event-card .event-card-info p a { 
    font-size: 1.1em; 
} 

.events-row .event-card .event-card-info .button-cont { 
    text-align: center; 
} 

.events-row .event-card .event-card-info .button-cont .button { 
    display: inline-block; 
    margin: 30px; 
    padding: 10px 30px; 
    font-size: 1.8em; 
} 

そして、jQuery関数を使用して列の幅を確認し、画像に適切な高さを追加します。

function calcHeight() { 

    var heightCalc = $('.event-card').width() * 0.75; 

    $('.events-row .event-card .event-card-img img').height(heightCalc); 

} 

$(document).ready(function(){ 

    calcHeight(); 

}); 

$(window).resize(function() { 

    calcHeight(); 

});