Intereting Posts
Плавающие divs внутри div имеют странное расстояние Как организовать несколько элементов бок о бок без обертки , htaccess не работает на сервере Есть ли способ скрыть ячейку данных на основе определенного значения, используя только HTML / CSS? Простой html dom – как получить элементы dt / dd в массив? HTML + CSS: упорядоченный список без периода? asp.net – Как визуализировать tags html в свойстве свойства ListItem? Измените массив опций списка выбора Динамика динамика трех столбцов DIV; left = fixed, center = жидкость, right = жидкость location.host vs location.hostname и совместимость с несколькими браузерами? MySQL выбирает записи 1 час назад или более свежий в столбце datetime Можно ли полностью разделить HTML / CSS-макет с логикой GWT? Отображение списка файлов внутри таблицы Почему: после того, как это будет странно? как загрузить файл в Chrome без автоматического переименования файла для загрузки?

Получение высоты фонового изображения с помощью «background-size: содержать»

Итак, у меня есть галерея изображений. Каждое изображение представляет собой background-image которое растягивается по всей странице.

Чтобы каждое изображение использовало максимальную доступную ширину, я даю ему следующий фоновый размер:

 background-size: 100% auto; 

Однако некоторые из изображений выше, чем доступная высота экрана.

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

Однако, похоже, нет способа получить высоту измененного фонового изображения в JavaScript.

Это правда? Должен ли я прибегать к нормальным элементам изображения?

Есть много способов получить размер статического фонового изображения, например Как получить размер фонового изображения в jQuery? но они явно не применяются здесь.

Ключ должен использовать размеры статического изображения, вычислять пропорции изображения, а затем использовать размеры фактического элемента для определения вычисленных размеров измененного изображения.

Например, допустим, что у вас было следующее:

 html, body { height:100%; } body { background-image: url('http://placehold.it/50x100'); background-repeat: no-repeat; background-size: 100% auto; } 

Размер статического изображения составляет 50x100 , и он имеет размер 100% от элемента body. Поэтому ширина элемента body будет равна ширине измененного изображения. Если вы хотите рассчитать высоту изображения с измененной высотой, вы просто будете использовать соотношение сторон изображения. В этом случае высота изображения будет равна 800px , потому что (400*100)/50 = 800

ПРИМЕР ЗДЕСЬ

 var img = new Image(); img.src = $('body').css('background-image').replace(/url\(|\)$/ig, ""); $(window).on("resize", function () { $('body').height($('body').width() * img.height / img.width); }).resize(); 

Чистый подход JS: ПРИМЕР ЗДЕСЬ

 var img = new Image(); img.src = window.getComputedStyle(document.body).getPropertyValue("background-image").replace(/url\(|\)$/ig, ""); function resize(){ var bgHeight = document.body.offsetWidth * img.height / img.width; document.body.style.height = bgHeight + 'px'; } window.onresize = resize; resize(); 

Чистый метод JS будет самым быстрым, о чем свидетельствует этот пример jsPerf .

Это сработало для меня (внутри слайдера):