Как исправить нулевую высоту у разных по высоте lazyload изображений?

Question

[Предэйтор]

Для lazy загрузки изображений использую плагин Lazyload.
В документации описано как исправить это, даже миксин Sass написали.

Padding Bottom = (Image Height / Image Width) * 100%

.image-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 66.67%; /* You define this doing height / width * 100% */
    position: relative;
}
.image {
    width: 100%;
    /*height: auto;*/
    position: absolute;
}

Но у меня разные по высоте изображения. Как мне вычислять их высоту? Сайт будет построен на Wordpress, можно кодом php перехватить размеры, и добавить в инлайн. Можно это реализовать на Js или другим способом?

Comments

[Otrivin]

Position absolute убрать, например; тогда картинка сама растянет контейнер под себя

[Предэйтор]

Otrivin, вы не совсем поняли вопрос. Это не так работает. Я намеренно установил дочернему изображению absolute, так как нужно высчитать его размеры до появления. После установить по формуле, и таким образом padding-bottom будет респонсив.

[profesor08]

рабочий код покажи на jsfiddle или codepen, где воспроизводится проблема

Answer 1

[profesor08]

padding-bottom, padding-top работают относительно родителя. Картинка должна быть внутри враппера и растянута на всю высоту и ширину. У тебя задана только ширина. Установи height 100%