javascript - 水平居中高度变化的图像而不扭曲图像

Question

<div class="container">
    <img src="..." style="position: fixed; height: 80%;" />
</div>

图像高度设置为与窗口高度成比例，如何使其固定但居中，同时不扭曲图像。

因为图像的宽度也随高度而变化，不能只获取宽度并执行 'left:0; margin-left: -width/2' 技巧。

谢谢!

Answer 1

如果您能够使用以下样式，它就可以完成工作。

.container {
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
}

img {
    position: relative;
    height: 80%;
}

演示: http://jsfiddle.net/9qKsj/