Predaytor
@Predaytor
C# .NET Core, React, Typescript

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

Для 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;
}

5ccedec641cff814246768.png
Но у меня разные по высоте изображения. Как мне вычислять их высоту? Сайт будет построен на Wordpress, можно кодом php перехватить размеры, и добавить в инлайн. Можно это реализовать на Js или другим способом?
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега CSS
padding-bottom, padding-top работают относительно родителя. Картинка должна быть внутри враппера и растянута на всю высоту и ширину. У тебя задана только ширина. Установи height 100%
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы