Решая вопрос высоты IMG в пределах имеющегося лайтбокса кода

Question

Я почти закончил свой осветитель, видели здесь, на JSbin:

https://jsbin.com/pijoge/edit?html,output

и хотел бы помочь с одной небольшой проблемой. В принципе, любые портретные изображения * (см. Последнее изображение, например) * высота проходит мимо экрана или максимальной высоты окна. Я хочу реализовать что-то, что позволяет повысить гибкость и адаптироваться к экрану.

Я еще не сталкивался с проблемой с любыми ландшафтными изображениями, но в основном просто хочу, чтобы изображение постоянно вписывалось в экран.

Answer 1

Ну, вы только что добавили ширину: 100%; для всех ваших изображений в лайтбокс ... однако, основной экран компьютера - это пейзаж. Поэтому, конечно, портретное изображение будет переполнено.

Есть некоторые решения в CSS, однако, я думаю, вы должны использовать Javascript, чтобы справиться с этим.

Просто получите отношение к изображению, соотношение контейнеров в лайтбоксе (здесь это коэффициент просмотра) и примените соответственно css: если коэффициент img превосходит соотношение контейнеров: img width: 100%, img height: auto ;, иначе, наоборот!

Поместите этот код в функцию, и вызвать эту функцию каждый раз, когда вы показываете изображение в осветителя (так что, когда вы открываете его, и при смене изображения.)

Но в конечном счете, я бы порекомендовал вам использовать плагин lightbox, потому что ваш способ сделать это прямо сейчас не очень хорошо для меня (помещая все изображения непосредственно в лайтбокс), вы должны загружать их один за другим через Javascript.