如何让Angular Material Design <md-card>指令在IE中正确缩放成像?</md-card>

时间:2014-11-25 17:20:43

标签: css angularjs material-design angular-material

我已在possible issue网站上将其发布为material.angularjs.org,但我希望在此处发布此内容,以防基于CSS的解决方案我应该了解这一点。

我试图创建一个&#34;砌体布局&#34;我有多列不同尺寸的图像。我尝试使用卡片来保存每张图片,而在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中运行的示例。请注意,卡片的宽度和高度与图像有关:

enter image description here

...但是这里的结果在IE11中看起来如何。您可以在IE中看到,水平定向的图像缩小其高度以适应卡的宽度,但卡的高度不会随之缩小。它仍然是图像的高度。

The result in IE where you can see the cards retain the full height of the image even if they're scaled down.

是否有针对此类内容的CSS修复,或者它是如何实现<md-card>指令的问题?

要说清楚,我意识到这个图书馆正在进行中,到目前为止我很喜欢它。我对CSS不太满意,所以不确定这是否可以解决,或者我是否需要等待在材料代码中修复问题。

1 个答案:

答案 0 :(得分:18)

你的问题只是纯粹的CSS,因为IE并没有很好地处理&#34; height:auto&#34;,你需要提供一些特定的值...

所以,这是你的解决方案:

.parent {
    display: block;
}

.card img {
    width: 100%;
    height: 100%;
    display: inline-block;
}
祝你好运!