Как получить директиву Angular Material Design <md-card> для правильного масштабирования изображения в IE?

Я разместил это как возможную проблему в материале . 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. Обратите внимание, что ширина и высота карт соответствуют изображению:

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, поэтому не уверен, что это то, что я могу просто исправить, или если мне нужно дождаться исправления проблемы в коде материала.

Ответы

Ответ 1

Ваша проблема - просто чистый CSS, и поскольку IE не очень хорошо обрабатывает "height: auto", вам нужно предоставить определенное значение...

Итак, вот ваше решение:

.parent {
    display: block;
}

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

Удачи!