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

Question

我有一排语义用户界面卡片，每张卡片的顶部都有一个图像。然而，图片的高度可能不同，这意味着卡片标题(紧挨着图片的下方)可能相当低。这会导致整行的卡片标题高度不同。我想让所有图像的高度相同，但仍可缩放到更大尺寸的屏幕。

我找到了这个，但它并没有解决我的问题:
Image alignment within a row of divs

这是卡片的语义 ui 文档(我的是基于此的):
http://semantic-ui.com/views/card.html

Answer 1

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

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