将外部 div 缩小到缩放（转换）内部 div 的大小
Shrink an outer div to the size of a scaled (transformed) inner div
我有一个内部 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>
挑战太棒了，无法通过。
很确定 不是 仅通过 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> 一个 data-scale 属性并初始化它：
const zFactor = new zoomFactor('zoom-factor');
你真的不需要将它存储在 const 中，但它对于更改比例很有用：
zFactor.el.dataset('scale') = 0.5;
zFactor.update();
我可能会把它包装成一个插件，但我想跨浏览器测试它并提供更多选项（即允许将变换原点更改为居中或向右，创建一个自动初始化方法，等...)，使其更加灵活。
我有一个内部 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>
挑战太棒了，无法通过。
很确定 不是 仅通过 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> 一个 data-scale 属性并初始化它：
const zFactor = new zoomFactor('zoom-factor');
你真的不需要将它存储在 const 中，但它对于更改比例很有用：
zFactor.el.dataset('scale') = 0.5;
zFactor.update();
我可能会把它包装成一个插件，但我想跨浏览器测试它并提供更多选项（即允许将变换原点更改为居中或向右，创建一个自动初始化方法，等...)，使其更加灵活。