jquery - 使用 jQuery 或 CSS 保持图像比例

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>