web-dev-qa-db-fra.com

Comment obtenir la directive Angular Material Design <md-card> pour une mise à l'échelle correcte de l'image dans IE?

J'ai posté ceci en tant que problème possible sur le site material.angularjs.org , mais je voulais le publier ici au cas où il y aurait une solution basée sur CSS pour cela. savoir a propos.

J'essaye de créer une "disposition de maçonnerie" où j'ai plusieurs colonnes d'images de différentes dimensions. J'essaie d'utiliser des cartes pour contenir chaque image, et dans Chrome et Firefox, cela fonctionne exactement comme je m'y attendais. L'échelle de la carte à la fenêtre (en utilisant flex) et les images sont à la taille des cartes. Cependant, le IE 11 la hauteur des cartes semble rester avec la hauteur réelle de l'image, même si elle est réduite à une taille plus petite. J'ai créé un Codepen qui illustre le problème:

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>

... et voici le seul CSS non matériel que j'ai ajouté:

.card img {
  width: 100%;
  height: auto;
}

Voici cet exemple exécuté dans Chrome. Notez la largeur et la hauteur des cartes respectent l'image:

enter image description here

... mais voici à quoi ressemble le résultat dans IE11. Vous pouvez voir dans IE que les images orientées horizontalement réduisent leur hauteur en fonction de la largeur de la carte, mais la hauteur de la carte ne diminue pas avec elle. Il reste que la hauteur de l'image.

The result in IE where you can see the cards retain the full height of the image even if they're scaled down.

Y a-t-il un correctif CSS pour quelque chose comme ça, ou est-ce plus un problème avec la façon dont le <md-card> la directive est mise en œuvre?

Pour être clair, je me rends compte que cette bibliothèque est un travail en cours, et je l'aime jusqu'à présent. Je ne suis tout simplement pas bon avec CSS, donc je ne sais pas si c'est quelque chose que je peux simplement corriger, ou si je dois attendre que le problème soit corrigé dans le code matériel.

cssangularjsmaterial-designangular-material
29
Sam Storie

Votre problème est purement CSS, et parce que IE ne gère pas très bien la "hauteur: auto", vous devez fournir une valeur spécifique ...

Voici donc votre solution:

.parent {
    display: block;
}

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

Bonne chance!

18
Fire Bull