保持子div的縱橫比與父div的高度和寬度變化

Question

我想創建一個 div 來保持縱橫比與父級的高度和寬度變化。

在上面的 gif 中，您可以看到我能夠在更改寬度時保持框 div 的縱橫比，但在更改父級的高度時無法保持它。

 .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>

我希望灰色框的行為如下：

Answer 1

使用默認寬度和高度：

 .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>

寬度下寬度和高度：

 .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

我不得不說這目前是不可能的。 雖然您可以使用calc()和變量，但無法保持對對象當前width或height的動態引用。

當我看着用js做這件事時，也沒有干凈的方法。 您只需要編寫一個間隔來定期檢查父元素的寬度或高度是否已更改。

Google 正在推動dom 元素觀察器，但目前規范非常有限。

有趣的是，就像在您的示例中一樣，默認情況下圖像會執行此操作。 但是，似乎絕對沒有使用另一個元素來做到這一點的干凈方法。

Answer 3

您可以使用 JavaScript 來計算對象與父對象之間的寬高比。 然后您可以縮放以填充父對象（想想 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：我還繼續添加了兩個不同比例方法的示例。

Answer 4

添加 max-width: 100% 和 object-fit:cover，這是一個鏈接https://jsfiddle.net/jv1f4bhL/1/

 body { position: relative; background-color: wheat; padding: 0; margin: 0; } img { object-fit: cover; max-width: 100%; width: auto; }

 <img src="https://mdbootstrap.com/img/Others/documentation/img%20(7)-mini.jpg" />

Answer 5

    .box {
        max-height: 100%;
      }

....工作完美。