使用CSS制作一个未知高度img垂直中间并支持IE9

Question

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

img {
     width : 100%;
    }

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

我不知道image 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

使用flex

尝试此代码

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