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小提琴中的示例：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（还）。

封面

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

来源：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可以根据您的需要更改为百分比。尝试改变它，看看它做了什么。

创建响应式实现卡

2 个答案: