文章详情页

前端 - 怎样让scale缩小的元素不占据原来的空间？

浏览：63日期：2024-06-11 08:21:06

问题描述

demo在这， https://jsfiddle.net/qk83j2wv/使用scale（0.5）缩小一个元素，但缩小后的元素还是占据原来元素的大小空间，怎样让那个元素缩小后的大小和所占据的空间一样大呢？

前端 - 怎样让scale缩小的元素不占据原来的空间？

但外层元素还是以缩小前来布局的...

问题解答

回答1：

同是菜鸟，好像无解，但是可以定位缩放的点，transform-origin:left top，使用这个可以从左上角缩放，至于大小还是原始大小，给父元素加个overflow：hidden吧

回答2：

transform是不会引起重排的，也就是说对元素进行缩放等操作不会影响到其他元素的布局，这样做动画之类的效果性能会更好。如果你要在缩放的同时改变元素的占据空间，那就用zoom做缩放。

回答3：

同大小透明p放到下面

回答4：

希望对你有帮助<style>

#d1 { width:200px; height:60px; border:1px solid red; transform-origin:left top; }#d1>span { display:block; font-size:32px; line-height:60px; background:#F90; }

</style><body>

<p id='d1'><span>内容</span></p><span class='btn'>点我</span><script> $(function(){var i = true; $(’.btn1’).click(function(){ if(i){$(’#d1’).css({transform:’scale(0.5)’});i = false;}else {$(’#d1’).css({transform:’scale(1)’});i = true; } }); })</script>

</body>

回答5：

试试zoom缩小

回答6：

理论上是无解的，这个要试着调整一下整体布局来达到你要的效果

回答7：

纯CSS不会，囧。不过有一个思路，可以给一个父元素做为wrapper，然后用 JavaScript 计算出compute style的高和宽，再相应缩小为50%。

上一条：前端 - transform:rotate不能旋转的问题下一条：jquery - 移动端如何写弹性效果

相关文章：

1. docker绑定了nginx端口外部访问不到2. android - viewpager问题PagerTabStrip样式3. javascript - CSS图片轮播显示问题4. javascript - vue-router怎么不能实现跳转呢5. python 字符串匹配问题6. javascript - 这里的这个函数是干嘛用的？7. python - xpath提取网页路径没问题，但是缺失内容？8. 随机数 - 有没有用Python生成n个不重复随机坐标的算法？9. javascript - IOS微信audio标签不能通过touchend播放10. javascript - 微信小程序如何实现这种左滑动出现删除的办法？有相关api吗？