我把它作为一个
possible issue在
material.angularjs.org网站，但想张贴在这里，如果有一个基于CSS的解决方案，我应该知道。
我试图创建一个“砖石布局”，其中我有多个不同尺寸的图像列。我试图使用卡来保存每个图像，在Chrome和Firefox它的工作原理正如我所料。卡尺到窗口(使用flex)和图像缩放匹配的卡的大小。然而，在IE 11上，卡的高度似乎与图像的实际高度保持一致，即使它被缩小到更小的尺寸。我创建了一个Codepen演示了这个问题：
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>
…这里是我添加的唯一非物质CSS：
.card img {
width: 100%;
height: auto;
}
这里是在Chrome中运行的示例。注意卡的宽度和高度尊重图像：
…但是这里的结果看起来在IE11。你可以看到在IE中，水平定向的图像缩放其高度，以适应卡的宽度，但卡的高度不会随着它缩小。它仍然是图像的高度。
有这样的东西的CSS修复，或者它是更多的问题，如何< md-card>指令是否实现？
要清楚，我意识到这个图书馆是一个正在进行的工作，我很喜欢它。我只是不好的CSS，所以不知道这是否是我可以只是解决，或者如果我需要等待问题在材料代码中修复。
解决方法
你的问题只是纯CSS，并且因为IE不能很好地处理“height：auto”，你需要提供一些具体的值…
所以，这里是你的解决方案：
.parent {
display: block;
}
.card img {
width: 100%;
height: 100%;
display: inline-block;
}
祝你好运！
