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

[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.

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

[laimas]

background-size: 100% contain;

[olifus]

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>

[olifus]

это как?

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

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

[рони]

olifus,
тогда предзагрузка картинок и код примерно как тут Кропинг Jquery в слайдере строки 125 и 142 , если конечно нет выхода через css

[рони]

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

[olifus]

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

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

касаемо:

тогда предзагрузка картинок и код примерно как тут Кропинг Jquery в слайдере строки 125 и 142

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

[olifus]

у hover добавил:

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

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