html - 如何保持用 .. 包裹的图像的纵横比

Question

我有一个宽度小于图像宽度的 block 。此图像用 Angular Material 的指令包裹:

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

我想保持该图像的纵横比，但这是我得到的: http://codepen.io/anon/pen/qbJLXN

有人可以帮忙吗？

Answer 1

我不确定你自己的限制，但下面的代码给出了你的要求:

 <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