I’m both a novice, so I don’t seem to have a solution, but I can locate the zoom point, transform-origin:left top, and use this to zoom from the upper left corner. As for the size, it’s still the original size. Just add overflow: hidden to the parent element
transform will not cause rearrangement, which means that scaling and other operations on elements will not affect the layout of other elements. In this way, the performance of animations and other effects will be better. If you want to change the space occupied by an element while scaling, use zoom to scale.
Pure CSS can’t do it, embarrassing. But there is an idea. You can use a parent element as a wrapper, then use JavaScript to calculate the height and width of the compute style, and then reduce it to 50% accordingly.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I’m both a novice, so I don’t seem to have a solution, but I can locate the zoom point, transform-origin:left top, and use this to zoom from the upper left corner. As for the size, it’s still the original size. Just add overflow: hidden to the parent element
transformwill not cause rearrangement, which means that scaling and other operations on elements will not affect the layout of other elements. In this way, the performance of animations and other effects will be better. If you want to change the space occupied by an element while scaling, usezoomto scale.Put the transparent p of the same size below
Hope it helps you
<style>
</style>
<body>
</body>
Try zoom
Theoretically there is no solution. You have to try to adjust the overall layout to achieve the effect you want
Pure CSS can’t do it, embarrassing.
But there is an idea. You can use a parent element as a wrapper, then use JavaScript to calculate the height and width of the compute style, and then reduce it to 50% accordingly.