css缩放不会使元素占位变小吗

css缩放不会使元素占位变小吗

看了好多百度搜索出来的文章，没有找到想要的解决办法，这里我分享两个解决办法吧，若有不足之处请谅解，谢谢。

第一个，使用margin解决：

原理：

1、外层定容器（溢出隐藏）

2、内层定缩放（具体方法为：定原点，然后margin偏移）

缺点：

1、相对于部分垂直布局偏移距离实际是有误差的（原因没深入了解，有见解的请指点一下，谢谢），例如：法二的代码就不适合该法一

示例代码如下：

.cardlayout{
width: 95%;
display: block;
margin: 0 auto;
min-height:160px;
box-shadow:0px 4px 6px 0px rgba(0,122,255,0.13);
border-radius:4px 8px 8px 8px;
overflow: hidden;
box-sizing:border-box;
.htmls{
overflow: hidden;
display: block;
width: 200%;
height: 200%;
transform:scale(0.5,0.5);
transform-origin:left bottom;
margin-top: -50%;
}
}

<div class="cardlayout">
<div class="htmls" v-html="nowcard">html等资源</div>
</div>

备注：你可以在<div class="htmls" v-html="nowcard">html等资源</div>内放一段html试试，本人测试项目为vue2021-06-25

您好，非常荣幸能在此回答您的问题。以下是我对此问题的部分见解，若有错误，欢迎指出。你好！ 不会变小哦。非常感谢您的耐心观看，如有帮助请采纳，祝生活愉快！谢谢！2021-06-28