Galleria可变高度

Question

我正在尝试使用Galleria插件进行图像处理.它工作正常,我可以通过参数将高度设置为0.66,高度将是宽度的66%,这是响应.

问题是,缩略图也包含在这个高度中,并且当在手机上观看时拇指不会变得更小,因此图像的高度逐渐变小,不再是66和更长.

我的问题是,如何使图像保持比例(没有考虑缩略图的高度)或(我想这更容易实现):如何旋转平板电脑或手机时动态设置高度比例(在浏览器调整大小是).使用小屏幕尺寸我想保持1:1的比例,因为拇指开始变得如此大于主图像),并且在480px宽度之后我希望比率为1:0.66.

在Galleria初始化并刷新拱廊尺寸后,有没有办法更改高度参数？我知道有一个refresh()参数,但我不确定如何动态更改高度比参数.

Answer 1

您可以使用CSS 媒体查询来检测屏幕尺寸并更改图像的宽度和高度。

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