[olifus]

Здравствуйте.
Есть код:

<div class="shortstory">
   <div class="img" style="background-image:url({image-1});"></div>
</div>

и стили CSS к нему:

.shortstory .img {
    width: 360px;
    overflow: hidden;
    height: 225px;
    transition: 0.5s;
    background-position: center center;
    background-size: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.shortstory .img:hover {
    background-size: 120%;
}

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

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

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

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

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