保持固定高度的图像纵横比

【问题标题】：Maintaining image aspect ratio for a fixed height保持固定高度的图像纵横比
【发布时间】：2017-02-13 17:56:54
【问题描述】：

我有一个高度为 600 像素的图像。我将它与 img 标签一起使用，而不是背景图像。原因是因为响应能力。我希望图像根据屏幕尺寸调整大小。但我希望我的图像高度为 300 像素。现在如果我设置max-height:300px 和width:100%。图像看起来被拉伸了。有没有一种方法可以根据屏幕尺寸对图像进行比例调整和响应？

这是一个引导轮播图像。

【问题讨论】：

提供您的代码
this 可能会让你开始......

标签： html css image responsive-design

【解决方案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

【讨论】：