jQuery Lightbox Размер изображения: Ограничить максимальный размер изображения

Question

У меня есть изображения, которые больше, чем окно просмотра экрана, при использовании их с помощью jQuery Lightbox изображения отображаются в исходном размере и, следовательно, чтобы увидеть полное изображение необходимо прокручивать по горизонтали и по вертикали. Я попытался использовать CSS-настройки, доступные в Интернете, но они, похоже, не работают. Я попробовал следующий код.

#lightbox-container-image-box { 
    max-width:900px ! important; // Or your max-width 
} 

#lightbox-container-image img { 
max-width:675px ! important; // (your max width - 20) 
} 

Итак, что я хочу сделать, это установить MaxWidth и MaxHeight в окне просмотра, в идеале не хотите изменить lightbox.js файл, который используется в нескольких других местах.

Answer 1

попробуйте добавить ширина%

#lightbox-container-image-box { 
    max-width:900px ! important; // Or your max-width 
    width: 100%; //use 100% of even 90% , see what works for you 
} 

#lightbox-container-image img { 
max-width:675px ! important; // (your max width - 20) 
width: 100%; 
} 

Answer 2

если у вас есть все им изображения с небольшим размером и хотите, чтобы показать в большом размере, то проверить его найти эти строки в jquery.colorbox.js

фотографии. style.width = photo.width + 'px'; photo.style.height = photo.height + 'px';

комментарий высота линии для формата изображения как

//photo.style.height = photo.height + 'ПВ';

и увеличить ширину изображения с отношением высоты photo.style.width = photo.width + 200 + 'px';

Answer 3

Я знаю, что вопрос был задан год назад, но так как ответ @Sompuperoo помог мне, он может быть полезен другим.

Вот что я использовал (В моем случае изображение было больше размера экрана):

#lightbox-container-image-box { 
    max-width: 100%; 
    height:100% !important; 
} 
#lightbox-container-image img { 
    max-width: 100%; 
} 

Answer 4

Если это плагин от Lokesh Dhakar для меня CSS скрипт ниже решил проблему.

В конце файла lightbox.css вам написать этот

#lightbox-container-image-box { 
    max-width: 80%; 
    height:100% !important; 
} 
#lightbox-container-image img { 
    max-width: 100%; 
} 
#lightbox-container-image-data-box{ 
    max-width:80%; margin-bottom:50px; 
} 

Предупреждения: # лайтбокс-контейнер-изображение ящик и # лайтбокса-контейнеровоз-данные изображений ящика должен иметь тот же макс -width

Если вы хотите, вы можете установить max-width в px.

GitHub project link

Website project link