Angular material 2 md-card width

Question

I'm having an issue with the md-card component

        <md-card>
            <img height="200" width="200" md-card-image src="/resources/{{odd?.image?.path}}" />
            <md-card-content>
                <button md-button>{{odd?.object?.name}}</button>
            </md-card-content>
        </md-card>

I have this code, it creates a card with an image inside and some text under the image. I want the image to be of size 200x200 and i want the card to wrap the image completely but instead, the opposite happens, the card fills the entire width of the page and as a result, the image stretches to the size of the card

If i remove the md-card-image attribute from the img tag, it shows the image in 200x200 but the md-card is still stretched.

How can i maintain the size that i want for the image and make the md-card wrap around it?

Solution

You need to use css for the sizing of your md-card

Source: Here

PS: its better to use box-sizing: border-box; so you can get the exact width...