css – 如何获得Angular Material Design的指令在IE中正确缩放到图像?

前端之家收集整理的这篇文章主要介绍了css – 如何获得Angular Material Design的指令在IE中正确缩放到图像?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我把它作为一个 possible issuematerial.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,所以不知道这是否是我可以只是解决,或者如果我需要等待问题在材料代码中修复。

解决方法

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

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

.parent {
    display: block;
}

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

祝你好运!

原文链接:https://www.f2er.com/css/220558.html

猜你在找的CSS相关文章