CODEWITHSUNDEEP
htmlcssangularangular-material2
areller
areller

Reputation: 5238

Angular material 2 md-card width

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

enter image description here

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.

enter image description here

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

Upvotes: 4

Views: 16975

Answers (1)

mmativ
mmativ

Reputation: 1414

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...

Upvotes: 6

Related Questions