将父项高度调整为子项 div 的最大值为 70%

Question

我有一个图库 (responsiveslides.js)，它在覆盖 window 的 jquery 移动弹出窗口中启动。所需的外观是根据浏览器 window.

设置画廊比例

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

我想要完成的是让弹出 div 高度与缩放后的图像匹配。蓝色背景 在图像的两侧 是可以的 但我不希望它出现在 bottom/top 上。 IE。橙色边框应该紧贴图像。此外，弹出窗口 div 不应超过屏幕的 70%。

现在我有 .popupGalleryBannerDIV height:70% 但它变得太大了，删除它会使图片库没有高度。

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

注意：我已经玩了一个星期了，所以 fiddle 上的一些 css 标记可能来自失败的尝试。

我无法弄清楚如何使这项工作有效任何帮助将不胜感激。

编辑：添加一些图片以帮助理解我要做什么。

View post on imgur.com

Answer 1

部分问题是您的幻灯片使用的背景图片本身没有默认 height/width。是内容决定了应该填多少space。

我的建议是改用标签或使用一些 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%

Adjusting parent height to child div to a max of 70% height

css

jquery-mobile