Galleria 可变高度

Question

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

问题是，缩略图也包含在此高度中，并且在手机上查看时缩略图不会变小，因此图像的高度会逐渐变小，不再是 66 岁及以上。

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

galleria初始化后有什么办法可以改变height参数并刷新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%;
    }
}