Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.02.2016, 12:09
Интересующийся
Отправить личное сообщение для olifus Посмотреть профиль Найти все сообщения от olifus
 
Регистрация: 06.02.2016
Сообщений: 10

Проверка высоты и ширины картинки и применение CSS
Здравствуйте.
Есть код:
Код:
<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.

Подскажите решение - скрипт, для реализации этого.
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 06.02.2016, 16:31
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

background-size: 100% contain;
Ответить с цитированием
  #3 (permalink)  
Старый 06.02.2016, 18:09
Интересующийся
Отправить личное сообщение для olifus Посмотреть профиль Найти все сообщения от olifus
 
Регистрация: 06.02.2016
Сообщений: 10

Сообщение от laimas
background-size: 100% contain;
нет, не подходит. в этом случае все изображения сильно увеличены по умолчанию (без наведения мышки), некоторые слишком даже. а когда наводишь мышь, изображения наоборот уменьшаются.
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2016, 18:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

Сообщение от olifus
в этом случае все изображения сильно увеличены по умолчанию
это как?
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2016, 18:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

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>
Ответить с цитированием
  #6 (permalink)  
Старый 06.02.2016, 19:05
Интересующийся
Отправить личное сообщение для olifus Посмотреть профиль Найти все сообщения от olifus
 
Регистрация: 06.02.2016
Сообщений: 10

Сообщение от рони
это как?
выше я немного неправильно выразился.

касаемо предложенного вами варианта - не сохраняются пропорции видимой части изображения. то есть, независимо от того, какого размера картинка, видимая часть должна быть 360*225, остальное overflow:hidden - скрывается либо лишнее по высоте, либо по ширине, в зависимости от пропорций картинки - если картинка по ширине 360, а по высоте 400, то оверфлоу:хидден оставшиеся 175пикс в равных долях сверху и снизу.
Ответить с цитированием
  #7 (permalink)  
Старый 06.02.2016, 19:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

olifus,
тогда предзагрузка картинок и код примерно как тут Кропинг Jquery в слайдере строки 125 и 142 , если конечно нет выхода через css
Ответить с цитированием
  #8 (permalink)  
Старый 06.02.2016, 20:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

olifus,
может вам cover нужен? в background-size
Ответить с цитированием
  #9 (permalink)  
Старый 06.02.2016, 21:16
Интересующийся
Отправить личное сообщение для olifus Посмотреть профиль Найти все сообщения от olifus
 
Регистрация: 06.02.2016
Сообщений: 10

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

касаемо:
Сообщение от рони
тогда предзагрузка картинок и код примерно как тут Кропинг Jquery в слайдере строки 125 и 142
то я в jQuery ноль, от слова совсем и данное решение не могу оценить.
Ответить с цитированием
  #10 (permalink)  
Старый 06.02.2016, 21:18
Интересующийся
Отправить личное сообщение для olifus Посмотреть профиль Найти все сообщения от olifus
 
Регистрация: 06.02.2016
Сообщений: 10

у hover добавил:
background-size: cover;
transition: all 200ms linear;
transform: scale(1.5);

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка на существование картинки Sherminator Events/DOM/Window 1 02.11.2013 17:04
Как запретить применение css при изменении окна браузера east (X)HTML/CSS 7 12.10.2012 21:23
Динамическое получение ширины и высоты окна браузера Esseron Элементы интерфейса 2 04.04.2011 16:00
стили Css в зависимости от высоты активной области браузера Vladimir_Kl Javascript под браузер 3 23.03.2011 16:04
Как создать окно, определенной ширины и высоты AnIva Events/DOM/Window 2 17.09.2008 09:17