How to fix zero height at different height lazyload images?

For lazy loading images use a plugin called Lazyload.
In documentation is described how to fix it, even mixin Sass wrote.

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;
}

5ccedec641cff814246768.png
But I have different height of the image. How do I calculate height? The website is built on Wordpress, can code php to intercept sizes, and add inline. You can implement it in Js or other method?
March 20th 20 at 11:52
1 answer
March 20th 20 at 11:54
padding-bottom, padding-top are working relative to the parent. The picture should be inside the wrapper and stretched to the full height and width. You set only width. Set height 100%

Find more questions by tags CSSJavaScriptHTML