transform等比缩放后，实际占用空间修改

一支一支杨桃枝

已于 2023-09-14 17:25:53 修改

阅读量3k

点赞数 3

文章标签： html css css3

于 2023-02-08 19:28:38 首次发布

本文链接：https://blog.csdn.net/qq_43527485/article/details/128939852

版权

1.transform使用

<div style="width: 300px; height: 300px; background: gray; ">

	<div style="width: 100px; height: 100px; background: indianred;transform: scale(0.5);transform-origin:left top;">
    </div>
    <div style="width: 300px; height: 300px; background: indianred;transform: scale(0.5);transform-origin:left top;">
    </div>
</div>

在这里插入图片描述

// scaleX 横向缩放量 scaleY纵向缩放量 transform: scale(scaleX scaleY)
transform:scale(2); 等同于变换：transform: scale(2 2);

//缩放后的顶点对齐方式
transform-origin:left top; //上下左右

2.实际占用空间

zoom可以将标签等比例进行放大或缩小的操作，实际占用的空间也会改变，但zoom在进行缩小时，部分样式依然会受到浏览器的限制，例如最小字号为12px；
transform属性进行的所有操作都不会改变标签的实际大小和占用空间，例如使用transform: scale()缩小2倍时，该元素的实际占用空间仍然为缩小前的大小，解决的方法就是在该元素的外层套上一个标签，该标签的大小为缩小的那个标签缩小后的尺寸，使用overflow: hidden属性可将多余的部分隐藏掉，这样就不会有缩小后占用多余空间的显示问题。

<div style="height:300px;width:300px;background: gray;">
<div style="height:50px;width:50px;overflow:hidden;">
	<div style="width: 100px; height: 100px; background: indianred;transform: scale(0.5);transform-origin:left top;">
    </div>
</div>
	<div style="width: 300px; height: 300px; background: indianred;transform: scale(0.5);transform-origin:left top;">
	</div>
</div>