Material: Images in md-card are being blown up to 100% width

[jelbourn]

Report from Googler on this line: https://github.com/angular/material/blob/master/src/components/card/card.scss#L63

This is causing images to suddenly blow out our layouts.... I'm not an expert, but it seems that this rule might be incorrect it's applying to all image tags that happen to NOT be within an md-card-content.

Seems like this rule is for "full bleed" images

context: https://github.com/angular/material/issues/6273

We don't use md-card-content since our spec calls for 24px margins and we'd prefer to not use overrides.

Perhaps this could/should be a more semantically named rule rather than applying to all images? (e.g.

Reproduction: http://codepen.io/anon/pen/graaLZ

[EladBezalel]

@jelbourn i don't understand what are the expectations?
The card itself is getting full width of the page, therefore the image inside should get the full size of the card, scaling down the card will also force the image to scale proportionally.

The image should get width: 100% without that, nothing promises that the image will save it's ratio.

[topherfangio]

As a side note: if you add the layout property to the parent <div>, the image maintains it's original size and the card is sized based on it, so it doesn't take up the full page width.

Also, @jelbourn is working with the original submitter to get some more specifics and should respond soon so we can make sure we understand the problem.

[richieforeman]

It seems Angular Material 1.2 makes this even worse by setting the height on images to 100%

It seems like md-card is written for the use cases in the demo, and not necessarily as a "generic card"

[ThomasBurleson]

Demos to test:

• http://codepen.io/team/AngularMaterial/pen/YweVWZ
• http://codepen.io/team/AngularMaterial/pen/VaeEaY
• https://codepen.io/team/AngularMaterial/pen/wMEjZ
• https://codepen.io/team/AngularMaterial/pen/wMEjZL

[crisbeto]

I don't see a nice way to solve this without breaking other functionality. The stretch is caused by the flex-direction: column; on md-card, in addition to the width: 100% on all the images inside a card. I have the following workarounds, both of which aren't ideal:

1. Either disable flex-direction or use flex-direction: row; flex-wrap: wrap, as well as setting width: auto on the image. This breaks the alignment on other cards and might have some other unexpected consequences.
2. Introducing a new class that people can use to wrap image with (as @topherfangio mentioned, but the layout attribute isn't really necessary). This shouldn't break anything else, but still requires an extra div around the image that you want to prevent from stretching. That class would look like this:

.md-unstyled-image img{
  max-width: 100%;
  width: auto;
  height: auto !important; /* needs to be important because md-card also sets it that way */
}

And would be used like this:

<div class="md-unstyled-image">
  <img src="http://i.imgur.com/Zi6Hy4z.jpg">
</div>

If we decide to go this route, we can also make it into a directive that wraps the image in a div via JS so users don't have to think about it. The HTML would look like:

<img src="http://i.imgur.com/Zi6Hy4z.jpg" md-unstyled-image>

What do you think?

[ThomasBurleson]

@crisbeto - I really like the md-unstyled-image idea. Is that the best name?
@topherfangio - your thoughts ?

We would need to clearly document this in the Card section for images... and perhaps create a new demo.

[crisbeto]

Not really, I just couldn't come up with a better one.

[topherfangio]

If we don't want a breaking change, then I think we could use the md-unstyled-image, although I think perhaps md-basic-image or md-plain-image sounds a tad bit better.

That said, I feel like this might be worth a breaking change to fix. Instead of automatically styling images inside of the card, I think it would be better if we could provide a few classes that users could apply to get the behavior that they want.

On the other hand, I understand that this might be too major of a breaking change, and so we may want to go the md-basic-image route so users have an easier time upgrading.

[crisbeto]

Those definitely sound better :) Should I go ahead with this as a workaround until we decide on a more permanent solution?

[ThomasBurleson]

agreed 👍