1

他の例を探しましたが、見つかりませんでした。私の画像コンテナはmax-width/max-heightを使用しているため、画像はコンテナに合わせて拡大縮小されますが、高さを設定せずに画像を上/下の自動マージンまたは中央に垂直に揃えることができないようです。

html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
}

#container {
    border: solid 1px #000;
    height: 100%;
    width: 65%;
    position: absolute;
    right: 0;
}

#container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
    vertical-align: middle;    
}​


<div id="container"><img   src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>​

http://jsfiddle.net/beftR/

4

1 に答える 1

1

コードに別のdiv名前を追加することによってのみ機能させることができました。/タイプを#container2使用してそれを行いました。これが私がしたことです（jsFiddle here）。tabletable-cell display

html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
}

#container {
    border: solid 1px #000;
    height: 100%;
    width: 65%;
    position: absolute;
    right: 0;
    display:table;
}

#container2 {
    display:table-cell;
    vertical-align:middle;
}

#container img {
    max-width: 100%;
    max-height: 100%;   
}​

<div id="container">
  <div id="container2">
    <img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
  </div>​
</div>
于 2012-12-17T05:00:51.893 に答える