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

4 回答

• 0

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

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

  这是预期的效果吗？

  回复于 2024-04-27T14:42:53+08:00
• 0

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

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

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

  有趣的是，就像在你的例子中，图像默认情况下这样做 . 然而，似乎绝对没有干净的方式与另一个元素这样做 .

  回复于 2024-04-27T14:42:53+08:00
• 0

  我写了一篇关于多年前的博客文章，名为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
  

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

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

  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：我也继续前进并添加了两个不同比例方法的实例 .

  回复于 2024-04-27T14:42:53+08:00
• -2

  .box {
          max-height: 100%;
        }
  

  ....工作完美 .

  回复于 2024-04-27T14:42:53+08:00