0

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

9
  • Попробуйте вместо max-height задать height: auto;
    – andreyqin
    20 окт 2014 в 10:44
  • Ничего не изменилось. Так же маленькая картинка остается маленькой.
    – Helena2977
    20 окт 2014 в 11:07
  • То есть вы хотите одновременно и сохранять пропорции, и растягивать картинку во всю высоту и ширину дива?
    – andreyqin
    20 окт 2014 в 11:10
  • Я хочу сохранять пропорции, а катринку растягивать на div так, чтобы либо по ширине, либо по длине уперлась в края.
    – Helena2977
    20 окт 2014 в 12:02
  • Для заполнения свободных краев можно использовать background. Для сохранения пропорций достаточно указывать только одно измерение width или height А вот какое именно измерение указать, тот тут на ум мне приходит только использовать JavaScript. Ну для примера: $( window ).ready(function(){ var img = $("#myimage"); img.attr("naturalWidth") > img.attr("naturalHeight") ? img.attr("width","120px") : img.attr("height","120px"); }) Как это сделать через CSS не придумал.
    – Alex Krass
    20 окт 2014 в 12:25

1 ответ 1

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%;
}
5
  • Alex: теперь все время true дает и поэтому ширину выставляет. ____ Похоже, у него нет naturalHeight вообще. ____ А нет, нашла, все есть, но что-то все равно не работает.
    – Helena2977
    20 окт 2014 в 14:10
  • А зачем Вам JavaScript? Я предложил Вам решение на чистом CSS, как Вы и хотели.
    – zhenyab
    20 окт 2014 в 14:30
  • У меня картинка меняется скриптом, а я не уверена, что ее так же легко можно поменять, если она в background задана. Во всяком случае это тоже надо пробовать. Поэтому я сначала пробую один вариант. Если не получится, то попробую Ваш тоже. И потом, тогда я ведь не смогу задать background чернам цветом, или можно тоже? ____ то Alex, в другом совсем дело. Эта функция вызывается только при прорисовке окна, а потом я меняю картинку, а она уже не вызывается.
    – Helena2977
    20 окт 2014 в 14:55
  • Я подправил ответ непосредственно под Ваш код. Возможно, это внесет некоторую ясность. К вопросу того, что не работает Javascript: нужно делать пересчет всех размеров на image.onload.
    – zhenyab
    20 окт 2014 в 15:05
  • Не получается со вторым вариантом тоже. Дает ошибку 404 на адрес, где картинка берется, хотя адрес правильный показывает. А как навесить на image.onload? ____ Уже нашла сама. Спасибо большое, zhenyab и Alex Krass. Вы мне очень помогли.
    – Helena2977
    21 окт 2014 в 6:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.