html - 如何垂直对齐容器中溢出的图像？

Question

这是我制作的 fiddle :

FIDDLE

我搜索了答案，但所有答案都只适用于高度小于容器的图像。我的问题是仅使用 CSS(如果仅使用 css 可能的话)垂直对齐高度大于容器的图像，容器具有可变高度。

感谢您的帮助。

<div class="img-container">
    <img src="http://www.placehold.it/600x500" alt="">
</div>

CSS:

.img-container {
    height: 300px;
    overflow: hidden;
}

img {
    width: 100%;
}

Answer 1

希望对你有帮助。

	.img-container {
	    height: 300px;
	    overflow: hidden;
	    position: relative;  
	}
	img {
    	position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translateX(-50%) translateY(-50%);
	    width:100%; 

	}

<div class="img-container">
    <img src="http://www.placehold.it/600x500" alt="">
</div>