Intereting Posts
Может ли использовать beforeloadload / unload для надежной отправки XmlHttpRequests Как создать раскрывающееся меню, которое загружает только текст не всей новой страницы? Как скрыть и показать элемент, если флажок установлен Центрировать мой текст, но сохранить выравнивание влево? Как я могу вычислить сумму значений переключателей с помощью jQuery? CSS для зависания, который включает все дочерние элементы Как взять папку в качестве входа в html? Ширина HTML перечеркнута границей Internet Explorer 11 игнорирует стиль списка: нет при первом загрузке Идентификатор тега не позволяет воспроизвести звук в хроме Не можете вернуть извне функцию или метод? Кнопка правого выравнивания внутри DIV Как добавить неэкспериментированные амперсанды в HTML с помощью Nokogiri :: XML :: Builder Горизонтально выровнять div без поплавка Как я могу преобразовать markdown в html (должен ли я использовать существующий скрипт)?

Получение высоты фонового изображения с помощью «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 .

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