子divに親の高さを最大70％の高さに調整する

Question

ウィンドウをオーバーレイするjqueryモバイルポップアップ内で起動するギャラリー（responsiveslides.js）があります。必要な外観は、ブラウザウィンドウに基づいてギャラリースケールを持つことです。ここで

は私のセットアップや問題の剥ぎ取ら実施例である：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%; 
} 

注：私はこれを1週間再生していますので、フィドルのCSSマークアップは失敗した試行の可能性があります。

この作業をどのように行うかを理解するのに問題があります。何か助けていただければ幸いです。

編集： 私がしようとしていることを理解するのに役立つ画像を追加します。

View post on imgur.com

Answer 1

これは私がサイズの変更をコーディングすることになった方法です：

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); 
      } 
    } 

Answer 2

問題の一部は、あなたのスライドは、それ自身には何のデフォルトの高さ/幅を持っていない背景画像を使用していることです。どのくらいのスペースを埋めるべきかを決める内容です。

代わりにタグを使用するか、ビューポートの幅に基づいて画像の比率に合わせてビューポートの高さを適切に調整するjs関数を使用することをお勧めします。