Question

这是我做的小提琴：

我搜索了答案，但所有这些答案仅适用于高度低于容器的图像。我的问题是垂直对齐一个高度比容器高的图像，它具有可变的高度，只使用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>

Answer 2

我认为问题是图像上设置的宽度属性。通常使用宽度，图像会尝试占用给定的任何可用空间。因此，尝试使用最大宽度100％，然后将图像的确切最大宽度放在容器中。

Answer 3

试试这可以帮助您解决问题的 HTML：

<div class="img-container"> <img src="" alt=""> </div>

<强> CSS：

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

请参阅jsfiddle上的演示：https://jsfiddle.net/amsarvaiya/rp1fu3kn/
参见演示全屏：https://jsfiddle.net/amsarvaiya/rp1fu3kn/embedded/result/

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

3 个答案: