如何让 Angular Material Design 的 <md-card> 指令在 IE 中正确缩放为图像？

Posted 2023-02-19

技术标签:

【中文标题】如何让 Angular Material Design 的 <md-card> 指令在 IE 中正确缩放为图像？【英文标题】：How to get Angular Material Design's <md-card> directive to scale to image properly in IE? 【发布时间】：2015-01-23 19:40:14 【问题描述】：

我已经在material.angularjs.org 网站上以possible issue 的形式发布了此内容，但我想在此处发布此内容，以防有我应该知道的基于 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，所以不确定这是否是我可以解决的问题，或者我是否需要等待材料代码中解决问题。

【问题讨论】：

FWIW，我有另一个例子，我使用的是元素，而不是使用元素。在这些情况下，如果我添加“溢出：隐藏；”到 div 的 css 样式然后 IE 正确显示。我无法使用这个例子来工作。您是否尝试过将.card img 的高度设置为 100% 而不是自动？我曾经在 IE11 中显示图像时遇到同样的问题。如果您在元素内另外包装图像 - 它会解决它。这是一个示例：

在 vero eos et accusamus et iusto odio dignissimos ducimus

我认为他们还没有解决这个问题。 【参考方案1】：

你的问题只是纯 CSS，因为 IE 不能很好地处理“height: auto”，你需要提供一些具体的值......

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

.parent 
    display: block;


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

祝你好运！

【讨论】：

以上是关于如何让 Angular Material Design 的 <md-card> 指令在 IE 中正确缩放为图像？的主要内容，如果未能解决你的问题，请参考以下文章