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

【问题标题】：Maintaining the aspect ratio of Image using CSS or jQuery?使用 CSS 或 jQuery 保持图像的纵横比？
【发布时间】：2016-02-29 22:44:47
【问题描述】：

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

【问题讨论】：

【解决方案1】：

用途：

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

这将保持纵横比。 height: auto 将确保 height 未在其他位置设置（如 cale_b 所述）

【讨论】：

【解决方案2】：

您可以通过仅在 CSS 中设置宽度或高度来实现此目的。

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

【讨论】：

如果高度设置在其他任何地方，这将不起作用。您还需要一个“高度：自动；”防止高度固定和宽度流动。
true 但是你会忽略你应该只设置宽度或高度而不是两者的观点。如果您可以控制自己的 CSS，那么这是一个有效的，实际上是唯一的选择。一旦你设置了高度和宽度，它就不起作用了。

【解决方案3】：

如果您使用的是引导程序，则可以将 img-responsive 类添加到您的图像中。

这个类应用了以下css属性

标记看起来像这样

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

【讨论】：