Galleria variable height

Question

Я пытаюсь использовать плагин Galleria для изображений. Он работает нормально, и я могу установить высоту с помощью параметра до 0,66, а высота будет составлять 66% от ширины и которая будет реагировать.

Проблема заключается в том, что миниатюры также включены в эту высоту, а большие пальцы не становятся меньше при просмотре на телефоне, поэтому изображение становится постепенно меньшим по высоте, а это не 66 &.

Вопрос: как я могу сделать изображение для поддержания пропорций (без учета высоты эскизов) или (я думаю, это легче достичь): как я могу динамически устанавливать пропорции высоты, когда планшет или телефон вращается (при изменении размера браузера). Используя небольшой размер экрана, я хотел бы поддерживать соотношение 1: 1, потому что большой палец начинает становиться настолько большим по отношению к основному изображению), а после 480px width я бы хотел, чтобы соотношение составляло 1: 0.66.

Есть ли способ изменить параметр высоты после того, как galleria инициализирован и обновлен размер галереи? Я знаю, что есть параметр refresh(), но я не уверен, как динамически изменять параметр отношения высоты.

Answer 1

Вы можете использовать CSS media queries для определения размера экрана и изменения ширины и высоты изображения.

@media only screen /* Portrait IPhone 6+*/ 
and (min-device-width: 414px) and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 
    img { 
     width:100%; 
     height:100%; 
    } 
} 

@media only screen /*Landscape IPhone 6+*/ 
and (min-device-width: 414px) and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 
    img { 
     width:100%; 
     height:50%; 
    } 
}