Question

我有一个画廊（responsiveslides.js），它是在覆盖窗口的jquery移动弹出窗口中启动的。期望的外观是根据浏览器窗口使图库缩放。

以下是我的设置和问题的简化工作示例：https://jsfiddle.net/02ds2trp/

我想要完成的是让弹出div高度与缩放图像匹配。蓝色背景在图像的侧面，但我不希望它在底部/顶部。即。橙色边框应紧贴图像。此外，弹出式div不应超过屏幕的70％。

现在我的.popupGalleryBannerDIV高度为70％，但是它增长得太大，删除它会使图片库没有高度。

.popupGalleryBannerDIV { position: fixed; width: 100%; background: #2795EE; top: 15%; left: 0px; height: 70%; /* how to I make this dynamic? */ max-height: 70%; }

注意：我已经玩了一个星期了，因此小提琴上的一些css标记可能来自失败的尝试。

我无法弄清楚如何使这项工作得到任何帮助，我们将不胜感激。

编辑：添加一些图片以帮助理解我正在尝试做的事情。

View post on imgur.com

Answer 1

问题的一部分原因是你的幻灯片使用的背景图片没有默认的高度/宽度。这是决定应填充多少空间的内容。

我的建议是使用标签代替或使用一些js函数来适当调整视口高度以匹配基于视口宽度的图像比例。

Answer 2

这就是我最终编码尺寸变化的方式：

function gallerySize() {
            //set height of content to 70%
            $('.popupGalleryBannerDIV').css("height", "70%");
            //check img size compaired to it, of large set image height to height of content
            var imgHeight = $('.popupGalleryBannerDIV').find('img').height();
            //else if height is smaller set conect to height of img
            if (imgHeight < $('.popupGalleryBannerDIV').height()){
                $('.popupGalleryBannerDIV').css("height", imgHeight);
            }
     }

将父高度调整为子div，最大高度为70％

2 个答案: