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

Posted 2023-05-09

【中文标题】将高度变化的图像水平居中而不扭曲图像

【英文标题】：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

【参考方案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 有帮助吗？它居中且有弹性。