Проверка высоты и ширины картинки и применение CSS
 

Здравствуйте.
Есть код:
и стили CSS к нему:
В данном случае, при наведении на изображение, оно немного увеличивается, но за пределы рамки не выходит - overflow:hidden.

Все работает как надо, но есть одно НО! Допустим, если изображение в пропорциях по высоте менее 225px, то оно заполняет собой пустое пространство, тем самым повторяясь. То же самое, если изображение пропорционально уже по ширине.

Данную проблему можно решить кропом, но это дополнительный функционал и дополнительные картинки.

Второй вариант - проверять через JS ширину и высоту изображения и исходя из результатов присваивать изображению width или height. Допустим, выводимое изображение имеет ширину 360px или более, а высоту менее 225px, тогда данному изображению прописывается height:225px, если изображение наоборот по высоте имеет 225px или более, а ширину менее 360 пикселей, то присваивается width:360px.

Подскажите решение - скрипт, для реализации этого.
Спасибо.

background-size: 100% contain;

нет, не подходит. в этом случае все изображения сильно увеличены по умолчанию (без наведения мышки), некоторые слишком даже. а когда наводишь мышь, изображения наоборот уменьшаются.

это как?

olifus,

<style type="text/css">
    .shortstory .img {
    width: 360px;
    overflow: hidden;
    height: 225px;
    transition: 0.5s;
    background-position: center center;
    background-size: contain  ;
    background-repeat: no-repeat;
    text-align: center;
    margin-bottom: 10px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: all .8s ease-in-out;
}
.shortstory .img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
  </style>
<div class="shortstory">
   <div class="img" style="background-image:url(http://www.androidpro.net/data/programs/images/sunny-forest-live-wallpaper_programView5_83983.png);"></div>
</div>
<div class="shortstory">
   <div class="img" style="background-image:url(http://www.wallpaperup.com/uploads/wallpapers/2014/04/09/328071/big_thumb_ff2d993a3140bfed6424550c461d77aa.jpg);"></div>
</div>

выше я немного неправильно выразился.

касаемо предложенного вами варианта - не сохраняются пропорции видимой части изображения. то есть, независимо от того, какого размера картинка, видимая часть должна быть 360*225, остальное overflow:hidden - скрывается либо лишнее по высоте, либо по ширине, в зависимости от пропорций картинки - если картинка по ширине 360, а по высоте 400, то оверфлоу:хидден оставшиеся 175пикс в равных долях сверху и снизу.

olifus,
тогда предзагрузка картинок и код примерно как тут http://javascript.ru/forum/dom-windo...ajjdere-2.html строки 125 и 142 , если конечно нет выхода через css

olifus,
может вам cover нужен? в background-size

вот это уже что-то. с cover картинки нормально маштабировались. но теперь у hover при наведении картинки ведут себя неадекватно - те, что были нормально по размеру - резко увеличиваются, а те, что были меньше, при наведении уменьшаются.

касаемо:
то я в jQuery ноль, от слова совсем и данное решение не могу оценить.

у hover добавил:

background-size: cover;
transition: all 200ms linear;
transform: scale(1.5);

увеличение пошло нормально, но вылезает за рамки. осталось решить overflow:hidden и похоже проблема будет решена.