使用语义卡跨行的卡片图像对齐

Question

我有一排语义ui卡，每张卡顶部有一个图像。然而，图像可以具有不同的高度，这意味着卡片标题（紧接图像下方）可以相当低。这导致整个行中的卡片标题的高度不同。我希望所有图像都具有相同的高度，但仍可扩展到更大尺寸的屏幕。

我发现了这个，但它没有解决我的问题：
Image alignment within a row of divs

这是卡片的语义ui文档（我的基础是这个）：
http://semantic-ui.com/views/card.html

Answer 1

一种解决方案是将背景大小设置为覆盖。 第二种解决方案是为盒子制作剪贴蒙版。

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;