父元素高度和宽度同时变化时，保持子元素纵横比的方法

Question

我想创建一个 div ，可以在父元素的高度和宽度变化时保持纵横比例。如上图所示，当改变宽度时，我能够保持 box 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>

我希望灰色框的行为像这样：

- Rohith

---

如果在.box中设置**max-height:100%**，您是否能够获得所需的效果？ - Kuja

我已经尝试过了，但没有效果。 - Rohith

请检查我的答案并让我知道。 - Kuja

Answer 1

添加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" />

- louie kim

Answer 2

我必须说，目前这是不可能的。虽然你可以使用calc()和变量，但没有办法保持对对象当前width或height的动态引用。

当我尝试使用js实现时，也没有简单的方法。你只能编写一个间隔来定期检查父元素的宽度或高度是否已更改。

谷歌正在推动dom元素观察器，但规范目前非常有限。

有趣的是，就像你的示例一样，图像默认情况下会执行此操作。但是，似乎没有干净的方法来处理其他元素。

- Serg Chernata

Answer 3

使用默认的宽度和高度：

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

这是期望的效果吗？

- Kuja

---

不，我希望box div的行为像一个具有max-width: 100%和max-height: 100%的图像。 - Rohith

Answer 4

你可以使用JavaScript来计算你的对象和父对象之间的宽度和高度比例。然后，你可以选择将其缩放以填充父对象（类似于CSS中的background-size: contain;），或者将其缩放以适应父对象（CSS：background-size: cover;）。

两种缩放方法的示例。 （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：我还添加了两种不同比例方法的示例。

- stldoug

Answer 5

    .box {
        max-height: 100%;
      }

......运行完美。

- Sudhir Kaushik

---

不要改变盒子div的宽高比。 - Rohith