创建响应式实现卡

Question

我们正在使用物化卡在我们的网站上显示图像。图片是用户上传的，因此它们的大小各不相同（尽管它们必须大于250px）。

我们能够保持图像的长宽比，这很棒，但是我们不知道如何在使每行卡片的高度相同的同时做到这一点。这是我们的目标-在保持卡片内部图像的纵横比的同时，使卡片具有相同的高度（以响应方式）。

我们整天都在混乱，没有走得太远。任何帮助深表感谢。

HTML：

<div class="row text-center">
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"interior"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Interior</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Drivetrain</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"performance"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque Terre">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Performance</h5>
      </div>
    </div>
  </div>
</div>

CSS：

.card {
  position: relative;
  background-color: #f4f4f4;
  // margin: 10px auto;
  height: 100%;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.7);
}

.card {
  height: 100%;
}

.card .card-image img {
  //object-fit: contain !important;
}

Answer 1

使用“媒体查询”可以根据屏幕尺寸设置宽度/高度。JS Fiddle中的示例：https : //jsfiddle.net/3yegzwex/

HTML：

<div class="row text-center">
  <div class="col-xs-12 col-md-4 col-sm-12">
    <div class="card" ui-sref='forsaleitem({type:"interior"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Interior</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12">
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Drivetrain</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12">
    <div class="card" ui-sref='forsaleitem({type:"performance"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Performance</h5>
      </div>
    </div>
  </div>
</div>

CSS：

.card {
  text-align: center;
}

@media (max-width: 990px) {
  .resizeimg {
    height: auto;
  }
}

@media (min-width: 1000px) {
  .resizeimg {
    width: auto;
    height: 350px;
  }
}

Answer 2

图像真的必须是内联的吗？还是可以将它们设置为background-image（因为它们是用户上传的）？如果是这样，您可以将该background-size属性设置cover为解决该问题。此外，因为object-fit是没有得到广泛的支持（还）。

覆盖

与contains相反的关键字。尽可能缩放图像并保持图像长宽比（图像不会被压缩）。该图像“覆盖”了容器的整个宽度或高度。当图像和容器的尺寸不同时，图像将被左右剪切或上下剪切。

资料来源：MDN

请参阅此更新的JSFiddle以获取演示。将padding-bottom可以改变，以满足您的需求的百分比。尝试更改它，看看它能做什么。

内联图像

如果图像必须是嵌入式的，则可以应用以下解决方案：

.card-image {
  width: 100%;
  padding-bottom: 50%;
  overflow: hidden;
  position: relative;
}

.card-image img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

图像将被推入.card-image并拉伸至所需宽度。有关演示，请参见此JSFiddle。将padding-bottom可以改变，以百分比您的需求。