保持子div的纵横比与父div的高度和宽度变化

Question

I want to create a div that maintains aspect ratio with height and width changes of the parent.

In the above gif, you can see that I was able to maintain the box div's aspect ratio when changing width but I'm unable to maintain it when changing height of the parent.

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

I want the grey box to behave like the following:

Answer 1

With your default width and height:

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

width lower width and height:

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

Is this the desired effect?

Answer 2

I'd have to say that this is not currently possible. While you can use calc() and variables, there is no way to keep a dynamic reference to object's current width nor height .

When I looked at doing this with js there was no clean way either. You'll just have to write an interval to periodically check if width or height of parent element has changed.

Google is pushing a dom element observer but the spec is currently very limited.

The funny thing is, just like in your example, images do this by default. However, there seems to be absolutely no clean way of doing this with another element.

Answer 3

You can use JavaScript to calculate the ratio of the width and the height between you object and the parent object. Then your can either scale to FILL the parent object (think CSS background-size: contain;) or scale to FIT the parent object (CSS: background-size: cover;)

Example of the two type of scaling methods. (A) The left shows SCALE-TO-FILL and (B) on the right we are using 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

When your parent object scales, you will need to determine these ratios.

Take a look at the embedded example and you can see how it works.

 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>

Edit #2: I also went ahead and added an example of the two different scale methods in action.

Answer 4

Add max-width: 100% and object-fit:cover, here's a link 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%;
      }

....worked perfect.