创建响应式物化卡

我们使用物化卡在我们的网站上显示图像。这些图像是用户上传的，因此它们有各种不同的尺寸（尽管它们必须大于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; 
}

来源

2016-03-19 mdegges

使用媒体查询来设置宽度/高度取决于屏幕的大小。例如，在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; 
    } 
}

来源

2016-03-19 23:14:51

在图片真的是内联？或者可以将它们设置为background-image（因为它们是用户上传的）？如果是这样，您可以将background-size属性设置为cover来解决该问题。也因为object-fit是not widely supported（还）。

盖

即是含有逆A关键字。将图像缩放至尽可能大并保持图像宽高比（图像不会变为）。图像“覆盖”容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像将被剪裁到左/右或顶部/底部。

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

来源

2016-03-19 23:19:13 Roy

创建响应式物化卡

回答

相关问题