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

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