How to get Angular Material Design's <md-card> directive to scale to image properly in IE?
I've posted this as a possible issue in the material.angularjs.org site, but wanted to post this here in case there's a CSS-based solution for this I should know about.
I'm trying to create a "masonry layout" where I've got multiple columns of images that are different dimensions. I'm trying to use cards to hold each image, and in Chrome and Firefox it works exactly as I expect. The card scale to the window (using flex) and the images scale the match the size of the cards. However, on IE 11 the height of the cards seems to stay with the actual height of the image, even if it's being scaled down to a smaller size. I've created a Codepen that demonstrates the problem:
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>
...and here's the only non-material CSS I've added:
.card img {
width: 100%;
height: auto;
}
Here's that example running in Chrome. Notice the width and height of the cards respect the image:
...but here's how the result looks in IE11. You can see in IE that the images that are orientated horizontally scale their height down to fit the width of the card, but the height of the card doesn't scale down with it. It remains that the height of the image.
Is there a CSS fix for something like this, or is it more an issue with how the <md-card> directive is implemented?
To be clear, I realize this library is a work in progress, and I am loving it so far. I'm just not good with CSS, so not sure if this is something I can just fix, or if I need to wait for the issue to be fixed in the material code.
Answer
Your problem is just pure CSS, and because IE doesn't handle very well the "height: auto", you need to provide some specific value...
So, here is your solution:
.parent {
display: block;
}
.card img {
width: 100%;
height: 100%;
display: inline-block;
}
Good luck!