保持子 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>

width 下宽高：

.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 element observer，但目前规范非常有限。

有趣的是，就像在您的示例中一样，图像默认执行此操作。但是，似乎绝对没有一种干净的方法可以用另一个元素来做到这一点。

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%;
      }

....完美运行。