CSS 如何让 Angular Material Design 的 <md-card> 指令在 IE 中正确缩放到图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27132864/
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
How to get Angular Material Design's <md-card> directive to scale to image properly in IE?
提问by Sam Storie
I've posted this as a possible issuein the material.angularjs.orgsite, but wanted to post this here in case there's a CSS-based solution for this I should know about.
我已经在material.angularjs.org站点中将此作为一个可能的问题发布，但我想在这里发布它，以防有我应该知道的基于 CSS 的解决方案。
I'm trying to create a "masonry layout" where I've got multiple columns of images that are different dimensions. I'm trying to use cards to hold each image, and in Chrome and Firefox it works exactly as I expect. The card scale to the window (using flex) and the images scale the match the size of the cards. However, on IE 11 the height of the cards seems to stay with the actual height of the image, even if it's being scaled down to a smaller size. I've created a Codepen that demonstrates the problem:
我正在尝试创建一个“砌体布局”，其中我有多列不同尺寸的图像。我正在尝试使用卡片来保存每个图像，而在 Chrome 和 Firefox 中，它的工作原理完全符合我的预期。卡片缩放到窗口（使用 flex）并且图像缩放匹配卡片的大小。然而，在 IE 11 上，卡片的高度似乎与图像的实际高度一致，即使它被缩小到更小的尺寸。我创建了一个 Codepen 来演示这个问题：
http://codepen.io/sstorie/pen/myJWxQ
http://codepen.io/sstorie/pen/myJWxQ
<body ng-app="materialApp" layout-fill>
<div ng-controller="AppCtrl" layout='column'>
<md-toolbar class='md-medium-tall'>
<div class="md-toolbar-tools">
<span>Fixed to Top</span>
</div>
</md-toolbar>
<div class='md-padding' layout="row" flex>
<div layout="row" flex>
<div layout="column" ng-repeat="photoColumn in data.photos3p" flex>
<md-card class="card" data-ng-repeat="photo in photoColumn">
<img ng-src="{{photo.path}}">
</md-card>
</div>
</div>
</div>
</div>
</body>
...and here's the only non-material CSS I've added:
...这是我添加的唯一非物质 CSS：
.card img {
width: 100%;
height: auto;
}
Here's that example running in Chrome. Notice the width and height of the cards respect the image:
这是在 Chrome 中运行的示例。注意卡片的宽度和高度尊重图像：
...but here's how the result looks in IE11. You can see in IE that the images that are orientated horizontally scale their height down to fit the width of the card, but the height of the card doesn't scale down with it. It remains that the height of the image.
...但这是结果在 IE11 中的显示方式。您可以在 IE 中看到，水平方向的图像将高度缩小以适应卡片的宽度，但卡片的高度不会随之缩小。它仍然是图像的高度。
Is there a CSS fix for something like this, or is it more an issue with how the <md-card>directive is implemented?
是否有针对此类的 CSS 修复程序，还是该<md-card>指令的实现方式存在更多问题？
To be clear, I realize this library is a work in progress, and I am loving it so far. I'm just not good with CSS, so not sure if this is something I can just fix, or if I need to wait for the issue to be fixed in the material code.
需要明确的是，我意识到这个图书馆正在开发中，到目前为止我很喜欢它。我只是不擅长 CSS，所以不确定这是否是我可以解决的问题，或者我是否需要等待材料代码中的问题得到解决。
采纳答案by Fire Bull
Your problem is just pure CSS, and because IE doesn't handle very well the "height: auto", you need to provide some specific value...
你的问题只是纯 CSS，因为 IE 不能很好地处理“高度：自动”，你需要提供一些特定的值......
So, here is your solution:
所以，这是您的解决方案：
.parent {
display: block;
}
.card img {
width: 100%;
height: 100%;
display: inline-block;
}
Good luck!
祝你好运！
