はCSSで縦中央をのimg unknow高さを作成し、IE9

Question

.box { 
 
    width : 100%; 
 
    max-height : 300px; 
 
    overflow : hidden; 
 
} 
 

 
img { 
 
    width : 100%; 
 
    }

<div class="box"> 
 
    <img src="banner.png" /> 
 
</div>

をサポートし、私は画像banner.pngのサイズがわからないが、私はmax-height.boxの要素を制限したいです。 banner.pngの高さがmax-heightより大きい場合は、imgタグを垂直に真っ直ぐにする必要があります。

どうすればいいですか？

Answer 1

.box{ 
width : 100%; 
max-height : 300px; 
overflow : hidden; 
} 
.box > img { 
    width : 100%; 
    max-width:100%; 
    vertical-align:middle; 
} 

Answer 2

このようにしてみてください。

更新答え

.box { 
width : 100%; 
max-height : 300px; 
overflow : hidden; 
} 
.box img { 
width:100px; 
vertical-align: middle; 
} 

Answer 3

使用してこのコードを試してみてくださいフレックス

.box{ 
width : 100%; 
max-height : 300px; 
display:flex; 
align-items: center; 
} 

.box { 
 
    width : 100%; 
 
    min-height : 300px; 
 
    overflow : hidden; 
 
    border:1px solid green; 
 
    display:flex; 
 
    align-items:center; 
 
}

<div class="box"> 
 
    <img src="http://c5.la4.download.9appsinstall.com:7080/group1/M02/6D/74/pYYBAFhLFviAdm8mAAAWl_5Xbaw477.png" /> 
 
</div>

位置

.box { 
 
    width : 100%; 
 
    min-height : 300px; 
 
    overflow : hidden; 
 
    border:1px solid green; 
 
    display:block; 
 
    position:relative; 
 
} 
 

 
.box img { 
 
    position:absolute; 
 
    top:50%; 
 
    transform: translate(0, -50%) 
 
}

<div class="box"> 
 
    <img src="http://c5.la4.download.9appsinstall.com:7080/group1/M02/6D/74/pYYBAFhLFviAdm8mAAAWl_5Xbaw477.png" /> 
 
</div>

Answer 4

を使用すると、この

.box { 
    width : 100%; 
    max-height : 300px; 
    overflow : hidden; 
    display: flex; 
} 

.box img { 
    margin: auto; 
}