Card image alignment across a row with semantic cards - css

Question

I have a row of semantic-ui cards with an image at the top of each card. However, the images can be of varying heights, meaning that the card title (immediately below the image) can be fairly low. This results in differing heights of card titles across the entire row. I would like to have all images be the same height, yet still scale to larger size screens.
I found this, but it did not solve my issues:
Image alignment within a row of divs
Here is the semantic-ui documentation for a card (mine are based off of this):
http://semantic-ui.com/views/card.html

Answer 1

One solution is to set background size to cover.
Second solution is to make clipping mask for box.
.card {
position: relative;
margin: auto;
display: inline-block;
background: purple;
width:200px;
height:300px;
}
.image {
width:200px;
height:200px;
background-image: url('http://image2.redbull.com/rbcom/010/2013-07-25/1331603705670_2/0010/1/900/600/2/red-bull-illume.jpg');
background-size: cover;
}
.image1 {
width:200px;
height:200px;
background-image: url('http://image2.redbull.com/rbcom/010/2013-07-25/1331603705670_2/0010/1/900/600/2/red-bull-illume.jpg');
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
<div id=background>
<div class=card>
<div class=image></div>
</div>
<div class=card>
<div class=image></div>
</div>
<div class=card>
<div class=image></div>
</div>
</div>
<div id=background>
<div class=card>
<div class=image1></div>
</div>
<div class=card>
<div class=image1></div>
</div>
<div class=card>
<div class=image1></div>
</div>
</div>