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

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

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

谢谢！

4

4 回答 4

4

如果您能够使用以下样式，它将完成这项工作。

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

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

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

于 2012-05-25T12:57:30.360 回答
1

如果你想保持位置固定，你需要一些javascript。请参阅jsFiddle 示例

html:

<img id="img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg" />

​CSS：

#img {
    position: fixed;
    height: 80%;
}

​js:

$(document).ready(function() {
    $(window).resize(function() {
        $('#img').css('margin-left', ($(window).width() - $('#img').width())/2);        
    }).resize();        
});​
于 2012-05-25T13:00:27.520 回答
0 
.container {
  margin: 5px/*top bottom*/ auto/*left and right*/;
}

如果您想要它在中间并且无论您滚动还是使用任何东西都使用#thecodeparadox's answer

于 2012-05-25T12:55:01.673 回答
0

这个例子http://dabblet.com/gist/2787939有帮助吗？它居中且有弹性。

于 2012-05-25T12:57:35.353 回答