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

Question

我想创建一个div，它保持宽高比与父级的高度和宽度变化。

在上面的gif中，您可以看到我在更改宽度时能够保持box div的宽高比，但在更改父级的高度时我无法维持它。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望灰盒子的行为如下：

Answer 1

使用您的默认宽度和高度：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

宽度较低的宽度和高度：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是期望的效果吗？

Answer 2

我不得不说现在不可能。虽然您可以使用calc()和变量，但无法对对象的当前width或height保持动态引用。

当我用js看这个时，也没有干净的方法。您只需编写一个间隔来定期检查父元素的宽度或高度是否已更改。

谷歌正在推动dom element observer，但目前规格非常有限。

有趣的是，就像你的例子中一样，图像默认执行此操作。但是，似乎绝对没有干净的方式与另一个元素这样做。

Answer 3

我写了一篇关于这个年前的博客文章，名为Easily Calculate Image Scaling to Fit or Fill a Destination Box。尽管我最初写的是关于图像缩放的，但它可以应用于任何对象。

总而言之，您可以使用JavaScript来计算对象与父对象之间的宽度和高度的比率。然后你可以缩放到FILL父对象（想想CSS background-size：contains;）或缩放到FIT父对象（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

当您的父对象缩放时，您需要确定这些比率。

看看嵌入式示例，您可以看到它是如何工作的。

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑＃2：我也继续并添加了两个不同比例方法的实例。

Answer 4

添加最大宽度：100％和对象适合：覆盖，这是链接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

std::fstream

....工作得很完美。