类似于css中的缩放?Transform:scale()属性作为缩放属性

Question

css中有一个缩放属性，它可以满足自己的需要，但在浏览器(尤其是Firefox(中不支持。还有一个transform:scale((属性，但事实是，使用transform:size((时，main_div块变为可见，而使用缩放属性时则不可见。我需要这种行为。

transform:scale((属性是否可以像缩放一样应用？或者缩放属性有什么相似之处？如何在这种情况下？

这是我的密码。您需要登录Google Chrome，因为Firefox的缩放属性不起作用https://jsfiddle.net/tj2349f5/1/

html

<div id='main_div'>
<div id="second_div">Hello</div>
</div>
<input class="test_button" type="button" name="button_name" value="test">

JavaScript

let test_button = document.querySelector('input.test_button');
test_button.addEventListener('click', () => {
//second_div.style.transform = 'scale(0.5)';
second_div.style.zoom = 0.5;
});

Answer 1

真正的CSS缩放和缩放之间的区别在于，缩放后的元素不会改变它所占用的空间，而缩放后的则会改变。

我不完全确定这个代码是否符合你的要求，因为在我的设备上，我没有看到问题中描述的红色出现[我认为这是因为我的设备更窄]。它所做的是在缩放的同时更改缩放元素的宽度和高度。

我在Chrome上看到的效果是，无论是使用这段代码还是真正的CSS缩放，滚动条都会发生相同的变化，而只使用缩放比例，滚动条根本不会改变。

let test_button = document.querySelector('.test_button');
test_button.addEventListener('click', () => {
second_div.style.height = second_div.offsetHeight * 0.5 + 'px';
second_div.style.width = second_div.offsetWidth * 0.5 + 'px';
second_div.style.transform = 'scale(0.5)';
test_button.style.display = 'none';
});

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
display: flex;
}
div#main_div {
display: block;
margin: 10px auto;
height: 80vh;
width: 80vw;
background: red;
overflow: scroll;
}
div#second_div {
height: 3000px;
width: 3000px;
background: green;
transform-origin: 0% 0%;
}

<div id='main_div'>
<div id="second_div">Hello</div>
</div>
<button class="test_button">CLICK TO MAKE IT LOOK LIKE A REAL CSS ZOOM BUT USING SCALE AND DIMENSION SETTING</button>

注意：如果放大比例，请记住也要恢复尺寸。