水平居中高度變化的圖像而不扭曲圖像

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

圖像高度設置爲與窗口高度成比例，如何使其固定但居中，也不會扭曲圖像。因爲圖像的寬度也隨着高度的不同而變化，所以不能只是得到寬度並且執行'left：0; margin-left：-width/2'技巧。水平居中高度變化的圖像而不扭曲圖像

謝謝！

來源

2012-05-25 Rex

你可以嘗試的CSS'#container的IMG {保證金：汽車}' – thecodeparadox

@ codeparadox：補充說，再加上'.container'中的'text-align：center'，沒有任何變化:(。 – Rex

它的一個class not a id so.container not #container ...誠實的錯誤 – TheLegend

如果你能夠使用以下樣式，它會做的工作。

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

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

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

來源

2012-05-25 12:57:30 VisioN

感謝這個作品！ – Rex

不客氣:) – VisioN

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

如果你想讓它正好在中間，不管你滾動或任何使用＃thecodeparadox的回答

來源

2012-05-25 12:55:01 TheLegend

請問這個例子http://dabblet.com/gist/2787939幫助？它居中且有彈性。

來源

2012-05-25 12:57:35 Ana

如果你想保持位置不變，你需要一些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();   
});

來源

2012-05-25 13:00:27 Wesley

不是。即使保持固定位置，也只能使用CSS完成。 – VisioN

這也適用！謝謝 – Rex

@VisioN啊是的，我明白了..你的解決方案確實更好！我upvoted它:) – Wesley

水平居中高度變化的圖像而不扭曲圖像

回答

相關問題