У меня есть такой 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
, но сохраняла пропорции? Причём я не знаю, что у неё больше: высота или ширина. И ещё надо, чтобы она располагалась по центру, а свободные края заполнялись чёрным цветом.