将高度变化的图像水平居中而不扭曲图像答案

【问题标题】：Horizontally center a height-variant image without distorting image将高度变化的图像水平居中而不扭曲图像
【发布时间】：2012-06-01 01:13:45
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

你可以试试css #container img {margin: auto}
@thecodeparadox：补充说，加上在 '.container' 中添加 'text-align:center'，没有任何变化:( .
它是一个类而不是一个 id 所以 .container 不是 #container...诚实的错误
如果我能看到你的 CSS，它也会有所帮助：D

标签： javascript jquery css

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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();        
});

【讨论】：

并非如此。即使保持固定位置也可以仅使用 CSS 完成。
@VisioN 是的，我明白了.. 你的解决方案确实更好！我赞成它:)

【解决方案3】：

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

如果你想把它放在中间，无论你是滚动还是使用#thecodeparadox's answer

【讨论】：

【解决方案4】：

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

【讨论】：