这样的图片需求，你学废了吗？

实现图片自适应的问题，当图片的高大于容器时，等比例缩小但是高要沾满容器。当图片宽大于容器时，等比例缩小但是宽要沾满容器。当宽高都小于容器时，处于容器的中间。宽高都大于容器时，同比列刚好沾满容器.....嗯，实现方式是使用纯css?

身为一个菜鸟，当然想想怎么弄哈，于是乎这样子就来了....

.image-list {
    width: 400px;
    height: 300px;
    border: 1px solid black;
    display: table-cell;
    vertical-align: middle;
    background-color: #f0f0f0;
}

再这样....

.image-list img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}

然后....

<div class="image">
    <div class="image-list">
        <img src="./image/1.png" alt="">
    </div>
    <div class="image-list">
        <img src="./image/2.png" alt="">
    </div>
    <div class="image-list">
        <img src="./image/3.png" alt="">
    </div>
    <div class="image-list">
        <img src="./image/4.png" alt="">
    </div>
</div>

嗯.....最后上图