Galleria可变高度

Question

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

问题是，缩略图也包含在这个高度中，当在手机上查看时，拇指并没有变小，所以图像的高度逐渐变小，它不再是66&更长。

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

在galleria初始化并刷新galleria大小后，有没有办法更改height参数？我知道有一个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%;
    }
}