css - img - md card angularjs example
¿Cómo hacer que la directiva<md-card> de Angular Material Design se ajuste a la imagen correctamente en IE? (1)
He publicado esto como un posible problema en el sitio material.angularjs.org , pero quería publicar esto aquí en caso de que exista una solución basada en CSS para esto.
Estoy tratando de crear un "diseño de mampostería" donde tengo varias columnas de imágenes que tienen diferentes dimensiones. Estoy tratando de usar tarjetas para mantener cada imagen, y en Chrome y Firefox funciona exactamente como esperaba. La escala de la tarjeta a la ventana (usando flex) y la escala de las imágenes coinciden con el tamaño de las tarjetas. Sin embargo, en IE 11, la altura de las tarjetas parece mantenerse con la altura real de la imagen, incluso si se está reduciendo a un tamaño más pequeño. He creado un Codepen que demuestra el problema:
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>
... y aquí está el único CSS no material que he agregado:
.card img {
width: 100%;
height: auto;
}
Aquí está el ejemplo que se ejecuta en Chrome. Observe que el ancho y el alto de las tarjetas respetan la imagen:
... pero así es como se ve el resultado en IE11. Puede ver en IE que las imágenes que están orientadas horizontalmente escalan su altura hacia abajo para adaptarse al ancho de la tarjeta, pero la altura de la tarjeta no se reduce con ella. Sigue siendo esa la altura de la imagen.
¿Existe una corrección de CSS para algo como esto, o es más un problema con la implementación de la directiva <md-card> ?
Para ser claros, me doy cuenta de que esta biblioteca es un trabajo en progreso, y lo estoy amando hasta ahora. Simplemente no soy bueno con CSS, así que no estoy seguro de si esto es algo que pueda arreglar, o si tengo que esperar a que el problema se solucione en el código del material.
Su problema es simplemente CSS, y debido a que IE no maneja muy bien la "altura: auto", debe proporcionar algún valor específico ...
Entonces, aquí está tu solución:
.parent {
display: block;
}
.card img {
width: 100%;
height: 100%;
display: inline-block;
}
¡Buena suerte!