使用 CSS 或 jQuery 保持图像的纵横比？

Question

我有尺寸为 (900x512) 的图片。因为我要让它响应，所以图像需要在保持宽高比的屏幕宽度内进行调整！！

Answer 1

使用：

<img src="..." style="width: 100%; height: auto;" />

这将保持宽高比。 height: auto 将确保 height 未在其他地方设置（如 cale_b 所述）

Answer 2

您只需在 css 中设置宽度或高度即可实现此目的。

.image{
  width: 40%;
  border: 1px solid #ffffff;
}

Answer 3

如果您使用 bootstrap，您可以将 img-responsive class 添加到您的图片中。

此 class 应用以下 css 属性

标记看起来像这样

<img class="img-responsive" alt="My image" >

Maintaining the aspect ratio of Image using CSS or jQuery?