前端 - 怎样让scale缩小的元素不占据原来的空间?
问题描述
demo在这 , https://jsfiddle.net/qk83j2wv/使用scale(0.5)缩小一个元素,但缩小后的元素还是占据原来元素的大小空间,怎样让那个元素缩小后的大小和所占据的空间一样大呢?
但外层元素还是以缩小前来布局的...
问题解答
回答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%。
相关文章:
1. javascript - vue项目 npm run dev报错2. 基于Nginx的Wordpress安装失败?3. 微信小程序可以用gulp,webpack吗?4. javascript - vue引用elementUI,报indx.css找不到的错?5. javascript - 求解答,koa-bodyparser获取到的参数是空对象,为什么?????6. javascript - 怎么优化多个ajax请求7. html5 - 百度Ueditor代码高亮和代码段滚动条冲突是怎么回事?8. HTML 5输入框只能输入汉字、字母、数字、标点符号?正则如何写?9. python2.7 - 在Eclipse开发Python,怎么去掉控制台输出的其他消息??10. linux - 升级到Python3.6后GDB无法正常运行?
