サイズ変更中にdivの下部に画像が表示されるようにするにはどうすればよいですか？

Question

ブラウザでサイズを変更するには画像が必要ですが、div内にあるdivの下部に留まる必要があります。また、divの中央に配置する必要があります。

これは私のhtmlです：

<div id="logo"> 
     <img src="/images/logo_2016.jpg"> 
    </div>   

そして、これは私が「位置：相対」を使用しています私のCSS

#logo { 
    position:absolute; 
    max-height: 200px; 
    height: 200px; 
    width: 100%; 
    bottom: 0px; 
    left 0px; 
    background-color:blue; 
} 

#logo img { 
    position: relative; 
    margin: auto; 
    display: block; 
    max-width: 800px; 
    width: 100%; 
} 

です：自動それはマージン」でセンタリングできるように画像のために"ブラウザのサイズが変更されると、イメージはそれに応じて縮小されますが、divの上部にも残ります。私はそれをサイズ変更してdivの一番下にとどめる必要があります。

センタリング、サイズ変更、下部に留まることはできますか？

Answer 1

コンテナが位置していなければなりません：相対と子の位置：絶対 - ではない他の方法でラウンド：マージン左の値が

width.`画像の半分である

<div style="position:relative;height:200px"> <img src="https://jsfiddle.net/img/logo.png" style="position:absolute;left:50%;bottom:0;margin-left:-22px;"/> </div>

を

例：https://jsfiddle.net/kbfrufr2/1/

更新：アントロに絶対あなたが持っている： 親コンテナは位置を持たなければならない場合相対：位置でラッパー、UCE

https://jsfiddle.net/wgLq1yaa/

@cale_b：25％が容器の25％になるのでパーセンテージおよび絶対値の混合が必要である -

Answer 2

ないIMGタグの

下部を追加：0; #logoには、#logo divの一番下に位置するようにしてください。