Html 垂直居中图像，100%宽度（li），尺寸固定

我试图垂直居中放置一个固定宽度和高度的图像。 我的基本HTML是：

<ul class="list">
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
</ul>

我已经尝试了不同的答案（还有很多其他答案），直到容器小于图像高度为止。然后它停止垂直对齐并溢出其容器（此处）

---

因此，基本上我希望在一个固定高度的容器中垂直对齐一个100%宽度的img，该容器小于图像高度，而不会溢出。有什么想法吗？

将

显示：表格单元格添加到图像中


更新：
如果将图像尺寸从400x200切换到200x400（即高度大于宽度），图像仍会溢出。有一个通用的解决方案吗？我对CSS做了一些修改，以简化一些，并希望达到您所期望的效果。虽然更新确实解决了溢出问题，但它不会在li中垂直居中显示图像，它通常从左上角开始显示。
.list-item {
    float: left;
    list-style: none;
    width: 200px;
    height: 80px;
    box-sizing: border-box;
    padding: 10px;
    background-color: #63A578;
}

.list-item div {
    overflow: hidden;
    text-align: center;
    height: 80px;
    width: 100%;
    line-height: 80px;
    border: 1px solid red;
}

.list-item img {
    height: auto;
    width: 100%;
    vertical-align: middle;
}