Question

Добрый день.

В стилях у меня прописана адаптация изображений: img {max-width: 100%; height: auto} , но всё дело в том, что при добавлении на сайт картинки через uLightBox, изображения сжимаются только по ширине, а высота остаётся неизменной, в результате чего картинки сильно вытягиваются и это смотрится некрасиво. Выглядит это вот так:

Картинки добавляю через конструкцию, о которой вы мне сказали:

<a href="ссылка на изображение" class="ulightbox" data-fancybox-group="ultbx"><img src="ссылка на изображение" alt="Альтернативный текст" title="Тайтл картинки" /></a>

Скажите, что нужно сделать для того, что изображения адаптировались и по выстоте тоже?

Answer 1

Прежде всего, к каждой картинке не добавляйте фиксированную ширину вида:

style="width: 700px; height: 1242px;"

далее к адаптации картинок, поправьте ваши стили:

img {max-width: 100%;height: auto!important;}

импортант допишите и будет все хорошо.

Comments

Фиксированная ширина добавляется потому, что картинка изначально имеет очень большие размеры 1500 х 2661, поэтому при загрузке картинки из Файлового Менеджера я задаю меньший размер изображения 700 х 1242.  Выходит, что мне надо изначально сжимать изображения до нужной величины, прежде, чем загрузить их на сайт, чтобы изображения не имели фиксированную ширину?

---

Катя,

Если добавляете большие, лучше заранее задавайте меньшую ширину, а не оригинальную, чтобы фото не выглядело огромным.

---

Yuri_Geruk,

Большое спасибо за помощь, Юрий!