使用jQuery或CSS保持img比率

Question

超过910px，我有一个固定的img，它占据了窗口高度的100％并且有一个宽度：auto;。在加载时，图像总是具有良好的比例，但是当我缩小（从底部）时，它会扭曲自己。

宽度保持不变，不会缩小。

图片包含在.picture div中：

.picture {
float: left;
position: fixed;
height: 100%;
width: auto;
}

示例：

有没有办法强制图像保持原始比例，也许使用jQuery？右边的内容已根据图像宽度改变其宽度。

以下是模板：http://bettercheckthekids.com/pirlo/index.html

Answer 1

我会建议你另一种方法来解决你的问题。如果你使用bootstrap，你可以使用div来制作可调整大小的图像。

 <div class="img-responsive">
     <img src="test.jpg" width='xxx' height='yyy' alt='test'>
  </div>