javascript - 画像を歪ませることなく、高さの異なる画像を水平方向に中央揃えにします

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

デモ：http： //jsfiddle.net/9qKsj/

Answer 2

位置を固定したい場合は、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();        
});​

Answer 3

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

真ん中に置きたい場合は、スクロールするか何かに関係なく、＃thecodeparadoxの答えを使用してください

Answer 4

この例http://dabblet.com/gist/2787939は役に立ちますか？中央に配置され、弾力性があります。