使用CSS将DOM元素缩放以适应其父容器大小

Question

对于图片和视频元素，我们可以使用：width:100%; height:auto;或更好的方法：object-fit:scale-down;，以使图像自动按比例缩放适应其父元素。

是否有类似（理想情况下仅通过CSS）的方法来缩放DOM元素，同时保持纵横比和子元素之间的视觉关系？

类似transform:scale(width:100%);这样的CSS属性将非常合理。

- cronoklee

---

保持宽高比？ - roberrrt-s

是的，谢谢 - 已更新问题 - cronoklee

在这种情况下：https://dev59.com/u3I_5IYBdhLWcg3wK_zE - roberrrt-s

我不知道。但是想知道是否可以以某种方式将宽高比存储在CSS变量中，并在transform scale方法中实现calc。 - AA2992

这是我会做的方式（包括js）https://jsfiddle.net/48yfg7zk/1/ - Pete

Answer 1

我认为纯CSS不可能做到这一点，因为当浏览器调整大小时，您需要重新计算父元素和子元素之间的比率（CSS无法做到这一点，因为它不是编程语言，只是样式语言）。

一个jQuery解决方案如下：

function scale() {
  $('.scaled').each(function() {
    var scaled = $(this),
      parent = scaled.parent(),
      ratio = (parent.width() / scaled.width()),
      padding = scaled.height() * ratio;

    scaled.css({
      'transform': 'scale(' + ratio + ')',
      'transform-origin': 'top left'
    });

    parent.css('padding-top', padding); // keeps the parent height in ratio to child resize
  })
}

scale();
$(window).resize(function() {
  scale();
});

.test {
  border: 1px solid red;
  width: 30%;
  position: relative;
}
.scaled {
  /* needs to be positioned absolutey otherwise the parent takes the child original height */
  position: absolute;
  top: 0;
  left: 0;
}
.scaled,
.not-scaled {
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="scaled">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat quis magna in tempus. Vivamus magna metus, consequat at mollis sit amet, vulputate et eros. Phasellus ut mauris faucibus, ultrices mauris at, mollis eros. In hac habitasse platea
    dictumst. Cras placerat pretium dui. Nullam quis lacinia nunc. Quisque est lectus, maximus at vehicula et, accumsan non nisi. Proin ac purus eget neque fermentum fringilla. Sed lectus mauris, pulvinar et venenatis ut, gravida quis nibh. Interdum et
    malesuada fames ac ante ipsum primis in faucibus. In dapibus purus facilisis consequat aliquam. Donec mattis orci fermentum laoreet scelerisque. Aliquam pretium urna tortor, quis viverra lacus posuere eu. Maecenas posuere mauris in sapien gravida,
    sed placerat purus efficitur.
  </div>
</div>
<div class="not-scaled">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat quis magna in tempus. Vivamus magna metus, consequat at mollis sit amet, vulputate et eros. Phasellus ut mauris faucibus, ultrices mauris at, mollis eros. In hac habitasse platea
  dictumst. Cras placerat pretium dui. Nullam quis lacinia nunc. Quisque est lectus, maximus at vehicula et, accumsan non nisi. Proin ac purus eget neque fermentum fringilla. Sed lectus mauris, pulvinar et venenatis ut, gravida quis nibh. Interdum et
  malesuada fames ac ante ipsum primis in faucibus. In dapibus purus facilisis consequat aliquam. Donec mattis orci fermentum laoreet scelerisque. Aliquam pretium urna tortor, quis viverra lacus posuere eu. Maecenas posuere mauris in sapien gravida, sed
  placerat purus efficitur.
</div>

- Pete

Answer 2

对于那些不想使用jQuery或必须使用纯JavaScript的人，这是转换后的纯JavaScript代码：

function scale() {
  document.querySelectorAll('.scaled').forEach(scaled => {
      parent = scaled.parentNode,
      ratio = (parent.offsetWidth / scaled.offsetWidth),
      padding = scaled.offsetHeight * ratio;

    scaled.style.transform = 'scale(' + ratio + ')';
    scaled.style.transformOrigin = 'top left';

    parent.style.paddingTop = padding; // keeps the parent height in ratio to child resize
  })
}

scale();
window.onresize = scale();

感谢 @Pete 的贡献，我只是将其转换为纯 JavaScript。您还需要使用他的答案中的 CSS 和 HTML。

- Munchkin