將div中的圖像垂直對齊到中間

Question

我在div內有一張圖片。 我通過在div上固定高度來裁剪圖像並overflow: hidden 。 如何將內部的圖像垂直對齊到中間？

因此，將我的目標形象化：

1. 貓的完整圖像。

2. 裁剪圖像時當前的外觀。

3. 我希望它看起來如何。 圖像在垂直方向上與中間對齊，並進行相應的裁剪。

請注意，圖像的高度會有所不同（用戶上傳）。

jsFiddle進行測試。

HTML：

<div class="container">
    <img src="http://i.imgur.com/qRkEJni.jpg">
</div>

CSS：

.container {
    height:200px;
    width:200px;
    float:left;
    overflow: hidden;
}

.container img{
    height:auto;
}

Answer 1

這是另一種方法：

.container img {
    height: auto;
    top: 50%;
    position: relative;
    transform: translate(0,-50%);
}

JSFiddle

Answer 2

Flexbox可以做到這一點：

 .container { height:200px; width:200px; float:left; overflow: hidden; border:1px solid black; display: flex; flex-direction: column; justify-content: center; } .container img{ height:auto; display: block; } 

 <div class="container"> <img src="http://i.imgur.com/qRkEJni.jpg"> </div> 

或絕對定位。

 .container { height: 200px; width: 200px; float: left; overflow: hidden; border: 1px solid black; position: relative; } .container img { height: auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } 

 <div class="container"> <img src="http://i.imgur.com/qRkEJni.jpg"> </div> 

或者...當然，可以使用背景圖片代替。

 .container { height: 200px; width: 200px; float: left; overflow: hidden; border: 1px solid black; position: relative; background-image: url(http://i.imgur.com/qRkEJni.jpg); background-position: center center; } 

 <div class="container"> </div>