Variable Height Galleria

Question

I am trying to use the Galleria plugin for images. It works fine, and I can set the height using the parameter to 0.66, and the height will be 66% of the width and which will be responsive.

The problem is that thumbnails are also included in this height, and the thumbs don't get smaller when viewed on the phone, so the image gets smaller in height, not 66 & longer.

My question is how can I make an image to maintain proportions (without taking into account the height of the thumbnails) or (I think it is easier to achieve): how can I dynamically set the proportions of the height when the tablet or phone (when resizing the browser). Using a small screen size, I would like to maintain a 1: 1 ratio, because the thumb starts to get so big in relation to the main image), and after 480px width I would like the ratio to be 1: 0.66.

Is there a way to change the height parameter after galleria is initialized and update the gallery size? I know there is a refresh () parameter, but I'm not sure how to dynamically change the height relation parameter.

Answer 1

You can use CSS multimedia queries to determine screen size and change the width and height of your image.

@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%; } }