web-dev-qa-db-ja.com

IEで適切に画像に合わせて拡大縮小するためのAngular Material Design <md-card>ディレクティブを取得するには？

私はこれを 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で実行している例です。カードの幅と高さが画像を尊重していることに注意してください。

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が苦手なので、これが私がちょうど修正できるものであるかどうか、または問題がマテリアルコードで修正されるのを待つ必要があるかどうかはわかりません。

cssangularjsmaterial-designangular-material
29
Sam Storie

あなたの問題は単なるCSSであり、IEは "height：auto"をうまく処理できないため、特定の値を指定する必要があります...

だから、ここにあなたの解決策があります：

.parent {
    display: block;
}

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

がんばろう！

18
Fire Bull