CSS vwとvhですが、ビューポートではなく親に相対的です

Question

親をオーバーフローさせないようにサイズを変更した固定アスペクト比のボックスを作成しようとしています。

古典的な​​は、親の幅に関して高さを定義することしかできません。また、テスト可能なhereは、要素が幅が大きくなるにつれて子の高さを大きくすることを許可します。良くない。

しかし、vhとvwを使用することで、親がビューポートの寸法であるという制限を実現できます。試験可能なhere。

<style> 
    div { 
    max-width: 90vw; 
    max-height: 90vh; 
    height: 50.625vw; /* height defined in terms of parent width (90*9/16) */ 
    width: 160vh; /* width defined in terms of parent height, which is missing from the padding-bottom trick (90*16/9) */ 
    background: linear-gradient(to right, gray, black, gray); 
    } 
</style> 

<div></div> 

ビューポートの代わりに親を参照するvhとvwに相当する方法がありますか？または、問題を解決するパディング・ボトム・トリックに対する無料のトリックがありますか？ CSS比率プロパティはどこですか？

また、images have some sort of intrinsic ratioでも、これをどのように活用するかはわかりません。

Answer 1

要素の組み込みアスペクト比を利用するMaintain aspect ratio with a fixed heightで行ったのと同様のものを使用できます。

ここでは、2つのキャンバスを持つ入れ子になった容器が必要です。

#resize { 
 
    resize: both; 
 
    overflow: auto; 
 
    width: 100px; 
 
    height: 140px; 
 
    padding: 20px; 
 
    border: 1px solid black; 
 
} 
 
.ratio { 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.ratio.vertical, .ratio.vertical > canvas { 
 
    height: 100%; 
 
    max-width: 100%; 
 
} 
 
.ratio.horizontal, .ratio.horizontal > canvas { 
 
    width: 100%; 
 
    max-height: 100%; 
 
} 
 
.ratio > div { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
#contents { 
 
    background: linear-gradient(to right, gray, black, gray); 
 
}

<div id="resize"> 
 
    <div class="ratio vertical"> 
 
    <canvas width="16" height="9"></canvas> 
 
    <div> 
 
     <div class="ratio horizontal"> 
 
     <canvas width="16" height="9"></canvas> 
 
     <div id="contents"> 
 
      Hello 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>