Как адаптировать картинку по высоте при добавлении её через uLightBox?

голоса: 0

Добрый день.

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

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

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

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

| Автор: | Категория: Дизайн сайта

Ответов: 1

голоса: 0
 
Лучший ответ

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

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

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

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

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

| Автор:
Выбор ответа лучшим | | Автор: Катя
Фиксированная ширина добавляется потому, что картинка изначально имеет очень большие размеры 1500 х 2661, поэтому при загрузке картинки из Файлового Менеджера я задаю меньший размер изображения 700 х 1242.  Выходит, что мне надо изначально сжимать изображения до нужной величины, прежде, чем загрузить их на сайт, чтобы изображения не имели фиксированную ширину?
Катя,
Если добавляете большие, лучше заранее задавайте меньшую ширину, а не оригинальную, чтобы фото не выглядело огромным.
Yuri_Geruk,
Большое спасибо за помощь, Юрий!
...