Масштабирование картинки с сохранением пропорций

Рейтинг: 0Ответов: 1Опубликовано: 20.10.2014

У меня есть такой div:

.photoBorder {
  width: 120px;
  height: 120px;
  border: 1px solid black;
}

.photoImage {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-height: 100%;
  max-width: 100%;
  display: block;
  margin: auto;
}
<div style="margin-top: 20px;" align="center" class="photoBorder">
  <img align="center" src="<c:url value=" /profile/showPhoto?${currentTime} "/>" class="photoImage" alt="" id="myimage" />
</div>

Все хорошо работает, если картинка больше, чем размеры div. А если картинка маленькая, то она так маленькая и рисуется. Как сделать, чтобы она увеличивалась до размеров div, но сохраняла пропорции? Причём я не знаю, что у неё больше: высота или ширина. И ещё надо, чтобы она располагалась по центру, а свободные края заполнялись чёрным цветом.

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 2

Если не интересует поддержка старых версий IE, и картинка может быть бэкграундом, то к div 

<div style="background-image: url(/profile/showPhoto?${currentTime}); background-color: #000" class="photoBorder"></div>

нужно применить следующие стили:

.photoBorder {
margin-top: 20px;
width: 120px;
height: 120px;

//стили которые непостредственно масштабируют картинку с сохранением пропорций
background-repeat     : no-repeat;
background-size       : cover;
background-position-x : 50%;
background-position-y : 50%;
}