Question

我有一个内部div，它已按任意比例缩放。我希望容器div的大小是内部div的大小，但是它的大小好像内部内容没有缩放。如何正确收缩包装？

#content {
  background-color: blue;
  height: 200px;
  width: 200px;
}

#scaler {
  transform: scale(0.5);
  transform-origin: 0 0;
}

#outer {
  background-color: red;
  display: inline-block;
}

<div id="outer">
  <div id="scaler">
    <div id="content">
    </div>
  </div>
</div>

Answer 1

挑战太难了。
可以肯定，仅通过CSS就可以实现不可，我希望使用JS可以更轻松。

最终两者兼而有之：

class zoomFactor {
  constructor(el) {
    this.el = this.query(el, document);
    this.update();
    this.query('input').addEventListener('input', () => this.update());
    window.addEventListener('resize', () => this.update())
  }

  query(s, el = this.el) {
    return el.querySelector(s);
  }

  value() {
    return this.query('input') ? 
      this.query('input').value :
      parseFloat(this.el.dataset('scale')) || 1;
  }

  update() {
    let val = this.value(),
      z1 = this.query('z-1'),
      z2 = this.query('z-2'),
      z3 = this.query('z-3');
    z1.style = z2.style = z3.style = '';
    z2.style.width = z1.clientWidth * val + 'px';
    z1.style.width = z2.style.width;
    z3.style.transform = 'scale(' + val + ')';
    z3.style.width = z2.clientWidth / val + 'px';
    z1.style.height = z3.clientHeight * val + 'px';
  }
}

new zoomFactor('zoom-factor');

.range {
  display: flex;
  justify-content: center;
}

.range input {
  width: 70%;
}

zoom-factor {
  position: relative;
  display: block;
}

z-1,
z-2,
z-3 {
  display: block;
  color: white;
}

z-1 {
  width: 50%;
  float: left;
  overflow: hidden;
  position: relative;
  margin: 1em 1em .35em;
}

z-2 {
  position: absolute;
  width: 100%;
  background-color: red;
}

z-3 {
  transform-origin: left top;
  background-color: blue;
}
z-3 p {
  text-align: justify;
}
p,
h3 {
  padding-right: 1em;
  padding-left: 1em;
}

h3 {
  margin-top: 0;
  padding-top: 1em;
}

z-3>*:last-child {
  padding-bottom: 1em;
}

<zoom-factor>
  <div class="range">
    <input type="range" value=".8" min="0.05" max="1.95" step="0.01">
  </div>
  <z-1>
    <z-2>
      <z-3>
        <h3>Transformed content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit ut aliquam purus sit amet. Non pulvinar neque laoreet suspendisse interdum consectetur libero. Sed euismod nisi porta
          lorem mollis aliquam ut. Mattis nunc sed blandit libero volutpat. Bibendum at varius vel pharetra vel. Nibh situs amet commodo nulla facilisi nullam vehicula ipsum. Metus aliquam eleifend mi in nulla posuere sollicitudin. Dolor morbi non arcu
          risus. Venenatis urna cursus eget nunc.</p>

        <p>In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Urna molestie at elementum eu facilisis sed odio. Arcu risus quis varius quam quisque. Lorem ipsum dolor sit amet. Fringilla est ullamcorper eget nulla facilisi etiam dignissim
          diam quis. Arcu bibendum at varius vel pharetra vel turpis. Consectetur a erat nam at lectus urna. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Diam quam nulla porttitor massa id neque aliquam vestibulum. Nam libero
          justo laoreet sit amet cursus sit amet dictum. Imperdiet sed euismod nisi porta lorem. Varius vel pharetra vel turpis nunc eget lorem dolor. Vitae auctor eu augue ut lectus arcu bibendum at varius. Aliquet enim tortor at auctor urna nunc id
          cursus metus. Non curabitur gravida arcu ac tortor.</p>
      </z-3>
    </z-2>
  </z-1>
  <h3>Normal content</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit ut aliquam purus sit amet. Non pulvinar neque laoreet suspendisse interdum consectetur libero. Sed euismod nisi porta lorem
    mollis aliquam ut. Mattis nunc sed blandit libero volutpat. Bibendum at varius vel pharetra vel. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Metus aliquam eleifend mi in nulla posuere sollicitudin. Dolor morbi non arcu risus. Venenatis
    urna cursus eget nunc.</p>

  <p>In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Urna molestie at elementum eu facilisis sed odio. Arcu risus quis varius quam quisque. Lorem ipsum dolor sit amet. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam
    quis. Arcu bibendum at varius vel pharetra vel turpis. Consectetur a erat nam at lectus urna. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Diam quam nulla porttitor massa id neque aliquam vestibulum. Nam libero justo laoreet
    sit amet cursus sit amet dictum. Imperdiet sed euismod nisi porta lorem. Varius vel pharetra vel turpis nunc eget lorem dolor. Vitae auctor eu augue ut lectus arcu bibendum at varius. Aliquet enim tortor at auctor urna nunc id cursus metus. Non curabitur
    gravida arcu ac tortor.</p>

  <p>In metus vulputate eu scelerisque felis. Quam quisque id diam vel quam elementum pulvinar etiam. Porttitor leo a diam sollicitudin tempor id eu nisl. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat. Mattis rhoncus urna neque
    viverra. Euismod elementum nisi quis eleifend quam adipiscing. Enim diam vulputate ut pharetra sit amet. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Risus sed vulputate odio ut. Augue interdum velit euismod in pellentesque.
    Consequat interdum varius sit amet mattis vulputate enim nulla aliquet. At quis risus sed vulputate odio ut enim. In egestas erat imperdiet sed euismod nisi porta.</p>

  <p>In arcu cursus euismod quis viverra nibh. Adipiscing commodo elit at imperdiet. Consectetur adipiscing elit duis tristique sollicitudin. Dui ut ornare lectus sit amet est placerat in. Felis eget nunc lobortis mattis. Pellentesque dignissim enim sit
    amet. Senectus et netus et malesuada. A lacus vestibulum sed arcu non odio. Congue quisque egestas diam in arcu cursus euismod quis viverra. Nisi scelerisque eu ultrices vitae auctor eu augue. Sapien faucibus et molestie ac feugiat sed. Ullamcorper
    a lacus vestibulum sed arcu.</p>

  <p>Varius vel pharetra vel turpis nunc eget lorem. Odio ut enim blandit volutpat maecenas volutpat. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Sed sed risus pretium quam. Vel pharetra vel turpis nunc eget lorem dolor. Sit amet porttitor
    eget dolor morbi. Mattis nunc sed blandit libero volutpat sed. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Congue nisi vitae suscipit tellus. Accumsan tortor posuere
    ac ut consequat semper viverra. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Sed velit dignissim sodales ut. Tempus urna et pharetra pharetra massa massa ultricies. Ornare aenean euismod elementum nisi quis eleifend quam.
    Aliquet nibh praesent tristique magna sit amet purus gravida. Euismod lacinia at quis risus sed vulputate. Ultrices mi tempus imperdiet nulla.</p>
</zoom-factor>

您极有可能不想使用input[type="range"]并希望从外部控制比例。您可以简单地通过<zoom-factor>的{{1}}属性并将其初始化：

data-scale

您实际上并不需要将其存储在const zFactor = new zoomFactor('zoom-factor');中，但是它对于更改比例很有用：

const

我可能会把它包装成一个插件，但是我想跨浏览器对其进行测试并提供更多选项（即，允许将转换原点更改为居中或右移，创建自动初始化方法等）。 ..），使其更加灵活。

将外部div缩小为缩放的（转换的）内部div的大小

1 个答案: