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%;
}

DEMO： http://jsfiddle.net/9qKsj/

Answer 2

如果你想保持这个位置不变，你需要一些javascript。见jsFiddle example

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();        
});

Answer 3

.container {
  margin: 5px/*top bottom*/ auto/*left and right*/;
}

如果你想要它在中间，无论你是否滚动或任何使用＃thecodeparadox的答案

Answer 4

此示例http://dabblet.com/gist/2787939有帮助吗？它具有中心性和弹性。

水平居中高度变化图像，不会扭曲图像

4 个答案: