親の高さと幅の両方の変更を伴う子divのアスペクト比を維持する

Question

親の高さと幅の変更を伴うアスペクト比を維持するdivを作成したいとします。上記のgifで

、あなたは私が幅を変更するときにボックスのdivの縦横比を維持することができたことを見ることができますが、私は親の高さを変えるときにそれを維持することができませんでしだ。

.box { 
 
    width: 100px; 
 
    background-color: #dfdfdf; 
 
    max-width: 100%; 
 
    max-height:100%; 
 
} 
 

 
.box:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-bottom: 160%; 
 
} 
 

 
.wrap9 { 
 
    width: 150px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
}

<div class="wrap9"> 
 
     <div class="box"></div> 
 
    </div>

：あなたのデフォルトの幅と高さ

Answer 1

：

.box { 
 
    width: 100px; 
 
    background-color: #dfdfdf; 
 
    max-width: 100%; 
 
} 
 
.box:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-bottom: 160%; 
 
} 
 
.wrap9 { 
 
    width: 125px; 
 
    height: 190px; 
 
}

<div class="wrap9"> 
 
    <div class="box"></div> 
 
</div>

私は灰色のボックスには、次のように動作します

幅低く、幅と高さ：

.box { 
 
    width: 100px; 
 
    background-color: #dfdfdf; 
 
    max-width: 100%; 
 
    max-height:100%; 
 
} 
 

 
.box:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-bottom: 160%; 
 
} 
 

 
.wrap9 { 
 
    width: 100px; 
 
    height: 120px; 
 
    border: 1px solid black; 
 
}

<div class="wrap9"> 
 
     <div class="box"></div> 
 
    </div>

これは、所望の効果か？

Answer 2

.box { 
     max-height: 100%; 
     } 

....完璧に機能しました。

Answer 3

これは現在できません。 calc()と変数を使用することはできますが、オブジェクトの現在のオブジェクトへの動的参照を保持する方法はありませんwidthでもheightです。

jsでこれを行うと、きれいな方法もありませんでした。親要素の幅や高さが変更されたかどうか定期的に確認するための間隔を書くだけで済みます。

Googleはdom element observerを押していますが、現在の仕様は非常に限定されています。

面白いことに、あなたの例のように、画像はデフォルトでこれを行います。しかし、他の要素でこれを行うためのクリーンな方法はまったくないようです。

Answer 4

私はこの年前のブログ記事、Easily Calculate Image Scaling to Fit or Fill a Destination Boxを書きました。私が最初に画像のスケーリングについて書きましたが、どのオブジェクトにも適用できます。

要約すると、JavaScriptを使用して、オブジェクトと親オブジェクト間の幅と高さの比率を計算できます。 2の

例を、（カバーCSS：背景サイズ）;：その後、あなたは親オブジェクトを埋めるためにどちらかのスケールは（CSSの背景サイズを考える含める）ことも、スケールが親オブジェクトに合わせてスケーリング方法のタイプ。 （A）左はSCALE-TO-FILLを示し、（B）はSCALE-TO-FITを使用している右側に示します。

// Find the ratio between the destination width and source width. 
RATIO-X = DESTINATION-WIDTH/SOURCE-WIDTH 

// Find the ratio between the destination height and source height. 
RATIO-Y = DESTINATION-HEIGHT/SOURCE-HEIGHT 

// To use the SCALE TO FILL method, 
// we use the greater of the two ratios, 
// let's assume the RATIO-X is greater than RATIO-Y. 
SCALE-W = RATIO-X * SOURCE-WIDTH 
SCALE-H = RATIO-X * SOURCE-HEIGHT 

// To use the SCALE TO FIT method, 
// we use the lesser of the two ratios, 
// let's assume the RATIO-Y is less than RATIO-X. 
SCALE-W = RATIO-Y * SOURCE-WIDTH 
SCALE-H = RATIO-Y * SOURCE-HEIGHT 

親オブジェクトが拡大すると、これらの比率を決定する必要があります。

組み込みの例を見てみると、どのように動作するのかが分かります。

var $parent = $('.parent'), 
 
    $child = $('.child'), 
 
    w = $parent.width(), 
 
    h = $parent.height(), 
 
    cw = $child.width(), 
 
    ch = $child.height(), 
 
    winc = -10, 
 
    hinc = -5; 
 

 
/* 
 
    This function is what you need.{ 
 
    First we grab the ratio for the width (rx). 
 
    Then the ratio for the height (ry). 
 
    To scale to FIT, we want the MIN of the two. 
 
    To scale to FILL, we want the MAX of the two. 
 
    r is used to calculate the new size for ther child obj. 
 
*/ 
 
function calcChildSize() { 
 
    var rx = w/cw, 
 
    ry = h/ch, 
 
    r1 = Math.min(rx, ry), 
 
    r2 = Math.max(rx, ry); 
 
    $('.child.fit').css({ 
 
    width: r1 * cw, 
 
    height: r1 * ch 
 
    }); 
 
    $('.child.fill').css({ 
 
    width: r2 * cw, 
 
    height: r2 * ch 
 
    }); 
 
} 
 

 
// just a simple function to change the size 
 
// of the parent object 
 
window.setInterval(function() { 
 
    if (w < 70) { 
 
    winc = 10; 
 
    } else if (w > 200) { 
 
    winc = -10; 
 
    } 
 
    if (h < 50) { 
 
    hinc = 5; 
 
    } else if (h > 200) { 
 
    hinc = -5; 
 
    } 
 
    w += winc; 
 
    h += hinc; 
 
    $parent.css({ 
 
    width: w, 
 
    height: h 
 
    }); 
 
    calcChildSize(); 
 
}, 100);

.parent { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid #aaa; 
 
    margin-right: 50px; 
 
} 
 
.child { 
 
    box-sizing: border-box; 
 
    width: 50px; 
 
    height: 70px; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    border: 1px solid rgba(255, 0, 0, 0.5); 
 
    text-align: center; 
 
    font-family: monospace; 
 
    font-size: 11px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent fit"> 
 
    <div class="child fit">FIT</div> 
 
</div> 
 

 
<div class="parent fill"> 
 
    <div class="child fill">FILL</div> 
 
</div>

編集＃2：私も先に行って、アクションに2つの異なるスケールの方法の例を追加しました。