search

angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

Image height is not adjusting to keep the aspect ratio same #6981

Closed ravishan110 closed 8 years ago

ravishan110 commented 8 years ago

I am trying to render an image within md-card. Its width is fixed(equals to card width), but the height is not adjusting automatically to keep the aspect ratio same. The height of the image is coming same to same as the original image. If anyone can tell how to automatically adjust the height of the image.

<md-card style="margin:15px;">
                    <div flex-gt-sm="33" layout-align="center center" layout="column">
                            <img src={{image}} flex width="200">
                        </div>
</md-card>
silberjan commented 8 years ago

i think this is the same #761

ThomasBurleson commented 8 years ago

Here is a fixed CodePen: http://codepen.io/team/AngularMaterial/pen/wMEjZL

The solution appears to be:

md-card>:not(md-card-content) img, md-card>img {
  height: 100% !important;
}

screen shot 2016-02-04 at 7 13 52 am

ThomasBurleson commented 8 years ago

@ravishan110 - can you confirm this pen works as desired in IE or your own specific browser?

ThomasBurleson commented 8 years ago

Fixed in SHA df90238

Noppey commented 8 years ago

http://codepen.io/Noppey/pen/WraZmG

I copied the first card Demo of the Angular Material website to codepen. This doesn't scale height in Chrome v48.0.

Only things I've edited are flex-gt-xs="10" and image url

ThomasBurleson commented 8 years ago

Your html was invalid. Try this:

  <body layout-fill>
    <div ng-controller="AppCtrl" layout='column'>
    <md-content class="md-padding" layout-xs="column" layout="row">>
      <md-card> ... </md-card>
      </md-content>
  </body>
ravishan110 commented 8 years ago

Sorry, i was out. so i didnt get the chance to check it out earlier. I fixed the issue for me by removing "md-card" and using "whiteframe" instead. Whiteframe can give same kind of effect as card. Rest of the contents, i left same as earlier. Hope this may work for other users as well.