使用CSS或jQuery维护Image的宽高比?

时间:2015-11-26 18:55:33

标签: javascript css responsive-design dimension

我有尺寸为(900x512)的图像。因为我要使其响应所以图像需要在屏幕宽度内调整,保持宽高比!!

3 个答案:

答案 0 :(得分:4)

使用:

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

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

答案 1 :(得分:1)

如果您使用的是bootstrap,则可以将img-responsive类添加到图像中。

此类应用以下css属性

  • 最大宽度:100%
  • 身高:自动
  • 显示:阻止

标记看起来像这样

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

来源:http://getbootstrap.com/css/#images-responsive

答案 2 :(得分:0)

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

UIStackView