维持固定高度的图像宽高比

Question

我的身高是600px。我使用的是img标签，而不是背景图片。原因是因为反应能力。我希望图像根据屏幕大小调整大小。但我希望我的图像高度为300px。现在，如果我设置max-height:300px和width:100%。图像看起来很紧张。有没有办法让图像按比例调整，并根据屏幕尺寸做出响应？

这是一个自举轮播图像。

Answer 1

设置width:auto;，如下例所示：

img.non-stretched {
  max-height:300px;
  width:auto;
}
img.stretched {
  max-height:300px;
  width:100%;
}

<img class="non-stretched" src="http://placehold.it/600x600"/>
<img class="stretched" src="http://placehold.it/600x600"/>

width的初始值为auto，因此您可以删除width属性。但是在你的情况下设置width会更安全，因为使用过的框架或其他样式表可以用另一个值覆盖规则。

  

您可以在此处找到有关width属性的更多信息：   https://www.w3.org/TR/CSS2/visudet.html#the-width-property