画廊可变高度

Question

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

问题是，缩略图也包含在这个高度中，在手机上观看时大拇指不会变小，所以图像的高度会逐渐变小，而不是66&了。

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

是否有办法改变高度参数后，画廊被初始化和刷新画廊的大小?我知道有一个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%;
    }
}