Galleria variable height

Question

I am trying to use Galleria plugin for images. It works OK and I can set height via parameter to 0.66 and the height will be 66% of the width and that is responsive.

Problem is, the thumbnails are also included in this height and the thumbs do not get any smaller when viewed on the phone so the image gets progressively smaller in height it is not 66& any longer.

My question is, how can I make the image to maintain proportions (without the height of the thumbnails taken into account) or (I guess this is easier to achieve): How can I dynamically set height proportion when the tablet or phone is rotated (on browser resize that is). Using small screen size I would like to maintain ratio of 1:1 because the thumb start to get so big in regard to the main image), and after 480px width I would like ratio to be 1:0.66.

Is there any way to change the height parameter after galleria is initialised and refresh the galleria size? I know there is a refresh() parameter, but I am not sure how to change height ratio parameter dynamically.

Answer 1

You can use CSS media queries to detect screen size and changing 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%;
    }
}