Центрирование больших изображений по вертикали в меньшем div

Question

У меня есть проблема, которая сводит меня с ума. У меня есть небольшой div, который содержит более крупное изображение (без фиксированного размера).

Im принимает это увеличенное изображение и дает ему ширину 100% для масштабирования, чтобы соответствовать границам ящиков, но мне нужно изображение для вертикально центрируются внутри div, а не просто сверху вниз.

Есть ли легкое исправление CSS для этого? Я ковырялся, но не имел большой удачи.

Currently: Intended: 
--------  -------- 
| div /w | |overflow| 
| image |  --------  
--------  | div w/ | 
|overflow| | image | 
| image |  -------- 
--------  |overflow| 
       -------- 

Answer 1

Не зная больше о вашей проблеме, есть много способов, которыми Вы могли бы приблизиться к его.

Скорее всего, если вы установили изображение в качестве фона div (вместо размещения его в HTML), оно решит вашу проблему;

div {background: url(image.png) center center no-repeat;} 

Другой метод, который я хотел, чтобы использовать position:absolute позиционировать изображение именно там, где я хочу.

Кроме того, если вы собираетесь использовать метод с vertical-align: middle, убедитесь, что вы применили его к изображению, а не к содержащему div.

Answer 2

Я хотел бы попробовать этот CSS:

div.container { width: ?px; height: ?px; overflow: hidden; position: relative; } 
div.container img { position: absolute; top: (-50% of image height); left: (-50% of image width); } 

Answer 3

Я предлагаю вставлять изображение в div, а затем центрировать div. Существует подробное описание того, как это сделать. here.