创建响应式具体化卡片

Question

我们正在使用物化卡片在我们的网站上显示图像。这些图像是用户上传的，因此它们有各种不同的尺寸（尽管它们必须大于 250 像素）。

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

我们整天都在搞这个，但没有走得太远。任何帮助深表感谢。

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 是not widely supported（还）。

封面

与包含相反的关键字。尽可能大地缩放图像并保持图像纵横比（图像不 被压扁）。图像“覆盖”了整个宽度或高度 容器。当图像和容器的尺寸不同时， 图像被剪裁为左/右或上/下。

来源：MDN

有关演示，请参阅 this updated 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 并拉伸到所需的宽度。有关演示，请参阅 this JSFiddle。 padding-bottom 可以更改为您需要的百分比。