CODEWITHSUNDEEP
htmlcssangular-material
dim0_0n
dim0_0n

Reputation: 2494

How to keep the aspect ratio of image wrapped with <md-card>..</md-card>

I have a block which width less than image's width inside it. This image is wrapped with angular-material's directive:

<div layout="row">
  <div flex="5">
    <md-card>
      <img src="https://s3-us-west-2.amazonaws.com/loki-dev/H400/VMZ4SlhYYaOhry1jnPaXfUKx6uU.jpeg">
    </md-card>
  </div>
</div>

I want to keep the aspect ratio of that image, but this is what I get instead: http://codepen.io/anon/pen/qbJLXN

Can someone help?

Upvotes: 1

Views: 665

Answers (1)

Asqan
Asqan

Reputation: 4479

I'm not sure about your own constraints but the following code gives out what you asked:

 <md-card style="display:-webkit-inline-box" >
        <img src="https://s3-us-west-2.amazonaws.com/loki-dev/H400/VMZ4SlhYYaOhry1jnPaXfUKx6uU.jpeg">
 </md-card>

inline-block elements are like inline elements but they can have a width and a height. see

Upvotes: 1

Related Questions