29

我已在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 中看到水平方向的图像会缩小其高度以适应卡片的宽度，但卡片的高度不会随之缩小。它仍然是图像的高度。

结果在 IE 中，您可以看到卡片保留了图像的完整高度，即使它们被按比例缩小。

是否有针对此类问题的 CSS 修复程序，还是<md-card>指令的实施方式存在更多问题？

需要明确的是，我意识到这个库是一项正在进行的工作，到目前为止我很喜欢它。我只是不擅长 CSS，所以不确定这是否是我可以解决的问题，或者我是否需要等待问题在材料代码中得到解决。

4

1 回答 1

18

你的问题只是纯CSS，因为IE不能很好地处理“高度：自动”，你需要提供一些具体的价值......

所以，这是你的解决方案：

.parent {
    display: block;
}

.card img {
    width: 100%;
    height: 100%;
    display: inline-block;
}

祝你好运！

于 2015-05-13T12:31:37.213 回答