Установить изображение DIV и вертикальное выравнивание

Question

JSFiddle

У меня есть DIV в макете жидкости, мне нужно, чтобы сохранить пропорции 1: 1. Внутри этого di v у меня иногда есть текст, иногда изображение, иногда и то и другое.

Текст должен быть выровнен по вертикали.

Изображение должно быть выровнено по вертикали и поместиться внутри div и поддерживать его собственное соотношение сторон.

Я достиг большей части вышеизложенного, моя единственная проблема - я не могу получить изображение, чтобы выровнять по вертикали и не превышать размер div одновременно.

Это поддерживает соотношение 1: 1 из div:

#upload-drop{ 
    background-color: #e6e6e6; 
    position: relative; 
} 

#upload-drop:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; 
} 

#upload-drop >div{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

Это вертикально выравнивает содержание:

.valign-center{ 
    text-align: center; 
    white-space: nowrap; 
} 
.valign-center:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; 
} 
.valign-center-content{ 
    display: inline-block; 
    vertical-align: middle; 
} 

Наконец, это держит изображение, чтобы это соотношение сторон и поместиться внутри родительского DIV:

#upload-img { 
    width: 100%; 
    height: 100%; 
}  
img{ 
    width:auto; 
    height:auto; 
    max-width: 100%; 
    max-height: 100%; 
} 

Если я удаляю ширину и высоту на #upload-img все вертикально выравнивается, но портретные изображения теперь больше не подходят для div.

Как я могу заставить их играть вместе?

Answer 1

Пожалуйста, добавьте ниже стили в тег изображения.

style="width:100%;height:100%" 

Проверьте jsfiddle

Answer 2

С этими изменениями, ваши примеры работают в жидкости шириной. Я не уверен, как они будут реагировать на экстремальные портретные образы.

Без изменения ширины 80% изображения будут оставаться центрированными, но избегать границ родительского элемента.

#upload-img{ 
    width: 100%; 
    max-height: 100%; 
}  
img{ 
    width:auto; 
    height:auto; 
    max-width: 80%; 
    max-height: 100%; 
}