如何让Angular Material Design的<md-card>指令在IE中正确缩放成像？
Sam*_*rie 29 css angularjs material-design angular-material
我在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不太满意,所以不确定这是否可以解决,或者我是否需要等待在材料代码中修复问题.
小智 18
你的问题只是纯CSS,而且由于IE不能很好地处理"height:auto",你需要提供一些特定的值......
那么,这是你的解决方案:
.parent {
display: block;
}
.card img {
width: 100%;
height: 100%;
display: inline-block;
}
祝好运!