1

Требуется отобразить узкое изображение на мобильном устройстве — изменить размер пропорционально.

Применяю такой jquery-скрипт:

$(document).ready(function(){
  var heightR = $(window).height();// высота экрана
  var widthR = $(window).width();// ширина экрана
  $('#bg').css({'width':widthR,'height':heightR}); 
});

css:

#bg{
background: url(../images/bg.jpg) no-repeat;
background-size: cover;
position: absolute;}

И все отрабатывает на отлично, как надо. Но при смене ориентации устройства новые свойства ширины и высоты не задаются — нужно обновлять страницу. Т.е. высота и ширина задаются только в момент загрузки страницы.

Как это исправить?

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 10 сен 2015 в 13:52

2 ответа 2

3

Можно отлавливать событие resize для окна. Некоторые браузеры/устройства поддерживают событие orientationchange.

// Прослушивание смены ориентации
window.addEventListener("orientationchange", function() {
    // изменение размеров картинки
}, false);

Или (более надёжно/распространённо)

// событие: изменение размера окна
window.addEventListener("resize", function() {
    // изменение размера картинки
}, false);

Существуют так же медиа-запросы (Media Queries) CSS вот пример:

/* портрет */
@media screen and (orientation:portrait) {
    /* стили для портретной картинки */
}
/* альбом */
@media screen and (orientation:landscape) {
    /* стили для альбомной картинки */
}

источник (англ.)
первоисточник (англ.)

0

Используй css-media. Можно по ориентации, можно по точным размерам подгонять css.

min-height
max-height

min-width
max-width

Ваш ответ

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

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