29

これは可能な問題としてmaterial.angularjs.orgサイトに投稿しましたが、知っておくべき CSS ベースの解決策がある場合に備えて、ここに投稿したいと思いました。

寸法が異なる画像の列が複数ある「石積みレイアウト」を作成しようとしています。カードを使用して各画像を保持しようとしていますが、Chrome と Firefox では期待どおりに動作します。カードはウィンドウに合わせて拡大縮小され (flex を使用)、画像はカードのサイズに合わせて拡大縮小されます。ただし、IE 11 では、カードの高さが画像の実際の高さにとどまっているように見えます。問題を示す Codepen を作成しました。

http://codepen.io/sstory/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