如何获得角材料设计的＆LT; MD卡＆GT;指令正确扩展到图像中IE浏览器？ [英] How to get Angular Material Design's <md-card> directive to scale to image properly in IE?
问题描述
我已经张贴这是一个可能的问题中的 material.angularjs.org 网站，但希望这张贴在这里情况下，有这种基于CSS的解决方案，我应该知道的。
I've posted this as a possible issue in the material.angularjs.org site, but wanted to post this here in case there's a CSS-based solution for this I should know about.
我试图创造一个砖石布局在那里我已经得到了不同尺寸的图像的多个列。我试图用卡持有每个图像，并在Chrome和Firefox它的工作原理正是我期望的那样。卡刻度的窗口（使用柔性）和图像缩放匹配的卡的尺寸。然而，在IE 11的卡的高度似乎留在图像的实际高度，即使它被缩小到一个较小的尺寸。我创建了一个codePEN演示该问题：
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:
HTTP：//$c$cpen.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：
...and here's the only non-material CSS I've added:
.card img {
width: 100%;
height: auto;
}
下面是在Chrome中运行的例子。请注意宽度和卡片高度尊重图片：
Here's that example running in Chrome. Notice the width and height of the cards respect the image:
...但这里的结果看起来如何在IE11。您可以在IE中看到，在水平定向图像扩展他们的身高缩小以适合该卡的宽度，但该卡的高度不与它缩小。它仍然是，图像的高度。
...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.
有没有这样的事情一个CSS修复，或者是更多的问题是如何在＆LT; MD卡＆GT; 指令实施
Is there a CSS fix for something like this, or is it more an issue with how the <md-card> directive is implemented?
的需要明确的是，我意识到这个库工作正在进行中，到目前为止，我爱它。我只是不擅长与CSS，所以不知道这是我能刚修好，或者如果我需要等待的问题被固定在材料code。的
推荐答案
您的问题只是纯粹的CSS，因为IE不很好地处理了高度：汽车，你需要提供一些特定的值...
Your problem is just pure CSS, and because IE doesn't handle very well the "height: auto", you need to provide some specific value...
所以，这里是您的解决方案：
So, here is your solution:
.parent {
display: block;
}
.card img {
width: 100%;
height: 100%;
display: inline-block;
}
祝你好运！
这篇关于如何获得角材料设计的＆LT; MD卡＆GT;指令正确扩展到图像中IE浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
