<分区>
我在缩放转换方面遇到了一点问题。我希望调整元素的大小，但是当我这样做时，我的旧尺寸占据了空间，而下一个元素将采用这个旧尺寸。 如何移除此约束？
HTML
<!-- White space with Scale -->
<div class="scale"></div>
<div class="scale"></div>
<!-- Whitout Scale -->
<div></div>
<div></div>
CSS
div:nth-of-type(even) { background: blue; }
div:nth-of-type(odd) { background: red; }
div {
width: 100px;
height: 100px;
}
.scale {
transform: scale(0.5);
transform-origin: top left;
}
JSFiddle:https://jsfiddle.net/c7d2s21y/
感谢您的回复。
最佳答案
var scaleTo = 0.5,
itemWidth = $('.scaleB').width(),
itemHeight = $('.scaleB').height()
;
function scaleThis(meausure) {
var output = meausure * scaleTo;
return output;
}
$('.scaleB').on({
'mouseover': function(event) {
$(this).css({
'width' : scaleThis(itemWidth) + 'px',
'height' : scaleThis(itemHeight) + 'px'
});
},
'mouseout': function(event) {
$(this).css({
'width' : itemWidth + 'px',
'height' : itemHeight + 'px'
});
}
});.wrapper {
background-color: #cccccc;
}
.wrapper:after {
content: "normal";
}
.wrapperScale {
background-color: #dddddd;
}
.wrapperScale:after {
content: "wrapped";
}
.wrapper_jQuery:after {
content: "jQuery";
}
.wrapper div:nth-of-type(even),
.wrapperScale div:nth-of-type(even) {
background: blue;
}
.wrapper div:nth-of-type(odd),
.wrapperScale div:nth-of-type(odd) {
background: red;
}
.scale, .wrapperScale div, .scaleB {
width: 50px;
height: 50px;
}
.scale:hover, .wrapperScale:hover {
transform: scale(0.5);
transform-origin: top left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<!-- White space with Scale -->
<div class="scale"></div>
<div class="scale"></div>
</div>
<!-- Whitout Scale -->
<div class="wrapper wrapperScale">
<div></div>
<div></div>
</div>
<!-- jQuery -->
<div class="wrapper wrapper_jQuery">
<div class="scaleB"></div>
<div class="scaleB"></div>
</div>这就是 CSS 转换实际上所做的，它不会影响周围的元素，您可以尝试将 DIV 包装在另一个元素中并将缩放应用于该元素，但它不会影响外部的其他元素，只会影响内容，除此之外，您将不得不通过 java Script 或 js 库(如 jQuery)来操作 DIV 的实际大小。
关于html - 删除 Scale 后的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34436403/