保持img比例调整大小 - 高度：100％;

Question

我创建了一个按预期渲染的模板，它带有不同的样式表以便响应。

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

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

有没有办法强制图像保持原始比例？

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

Answer 1

解决方案1：您可以尝试：

 img {
 width:  image height in pixels here;
 height: auto;
}

解决方案2： 如果图像在父div中，您可以尝试：

<div id="wrap"><img src="test.png" /></div>

鉴于上述标记，您可以使用以下规则：

#wrap {
height: 100px;
width: 100px;
}
#wrap img {
min-height: 100%;
min-width: 100%;
}