twitter-bootstrap 创建响应式实体化卡片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36106693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating responsive materialize cards
提问by mdegges
We're using materialize cards to display images on our site. The images are user uploaded, so they come in all different sizes (though they have to be greater than 250px).
我们正在使用实体化卡片在我们的网站上显示图像。图片是用户上传的，所以它们有各种不同的尺寸（尽管它们必须大于 250 像素）。
We're able to maintain the aspect ratio of the images, which is great, but we don't know how to do that while making the cards on each row the same height. That's our goal- to get the cards to be the same height (in a responsive way) while maintaining the aspect ratio of the images inside the cards.
我们能够保持图像的纵横比，这很好，但我们不知道如何做到这一点，同时使每行上的卡片具有相同的高度。这就是我们的目标——使卡片具有相同的高度（以响应方式），同时保持卡片内图像的纵横比。
We've been messing with this all day without getting very far. Any help is much appreciated.
我们一整天都在搞这个，但没有走得太远。任何帮助深表感谢。
HTML:
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:
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;
}
回答by Laugh_and_Drive
Use Media Queries to set the width/height depending on the size of the screen. Example in JS Fiddle: https://jsfiddle.net/3yegzwex/
使用媒体查询根据屏幕大小设置宽度/高度。JS Fiddle 示例：https: //jsfiddle.net/3yegzwex/
HTML:
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:
CSS：
.card {
text-align: center;
}
@media (max-width: 990px) {
.resizeimg {
height: auto;
}
}
@media (min-width: 1000px) {
.resizeimg {
width: auto;
height: 350px;
}
}
回答by Roy
Do the images really have to be inline? Or can they be set as background-image(since they are user uploaded)? If so, you can set the background-sizeproperty to coverto address the problem. Also because object-fitis not widely supported(yet).
图像真的必须是内联的吗？或者它们可以设置为background-image（因为它们是用户上传的）？如果是这样，您可以将该background-size属性设置为cover来解决问题。此外，因为object-fit是没有得到广泛的支持（还）。
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
覆盖
与包含相反的关键字。尽可能大地缩放图像并保持图像纵横比（图像不会被压扁）。图像“覆盖”了容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像会被左/右或上/下裁剪。
Source: MDN
来源：MDN
See this updated JSFiddlefor the demo. The padding-bottomcan be altered to a percentage for your needs. Try to change it and see what it does.
有关演示，请参阅此更新的 JSFiddle。将padding-bottom可以改变，以满足您的需求的百分比。尝试改变它，看看它做了什么。
Inline images
内嵌图像
If the images do have to be inline, you can apply this solution:
如果图像必须内联，您可以应用此解决方案：
.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;
}
The image will be pushed inside the .card-imageand stretched to its width that's needed. See this JSFiddlefor the demo. The padding-bottomcan be altered to a percentage to your needs.
图像将被推入内部.card-image并拉伸到所需的宽度。有关演示，请参阅此 JSFiddle。将padding-bottom可以改变，以百分比您的需求。
