css - 有没有办法使用变换比例使内容自动适合父 div？

Question

考虑一下:

有了用于缩放内容的精确数字(transform: scale(0.62);)，我们可以实现这一点:

是否可以在不使用精确数字的情况下实现这种缩放？内容是可变的，因此它必须适用于任何内容。

CodePen

.container {
  width: 200px;
  height: 200px;
  background: yellow;
}

/*
.content {
  transform: scale(0.62);
  transform-origin: 0 0;
}
*/

<div class="container">
  <div class="content">
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdasdasd
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdasdasd
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdasdasd
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasda
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdasdasd
    sdfdsfsdfsdfdsfsdsdfdsfs
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdasdasd
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdas
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdasdasd
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdasdasd
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdas
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdasdas
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdas
    sdfdsfsdfsdfdsfsdsdfdsfsdfsdfasdfsdfasdasdasdas
  </div>
</div>

Answer 1

这也需要 Javascript 的帮助。在Javascript中获取container div和content div的宽高。然后下面的技巧可能会有所帮助:

scale = min( 
  availableWidth / contentWidth, 
  availableHeight / contentHeight 
);