在 css3范围内的空白区域

小开

transform的运作模式如下:

你的元素被呈现出来
你的元素被转换(移动、旋转、缩放)
其他元素留在它们被渲染的地方-围绕“原始元素”

所以空白实际上就是元素最初呈现的方式。

如果希望以不同的方式呈现元素的大小并让周围的元素对其作出响应，那么应该在 CSS 中使用 width和 height。

或者你可以使用像 javascript 这样的东西来调整大小。

小开

最佳答案

解决方案是将元素包装在一个容器中，并在执行 scale ()时调整它的大小

Jsfiddle 演示: http://jsfiddle.net/2KxSJ/

相关守则如下:

#wrap
{
background:yellow;
height:66px;
width:55px;
padding:10px;
float:left;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
/* more transition here */
}


#wrap:hover
{
height:300px;
width:260px;
}


.quarter
{
padding:20px;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
background:red;
width:250px;
-webkit-transform-origin:left top;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
/* more transition here */
}




#wrap:hover .quarter
{
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin:left top;
-moz-transform-origin:left top;
/* more transform-origin */
}

小开

我解决了这个问题，通过添加一个’轮廓: 1px 固体透明’的元素上的规模应用。

#wrap:hover .quarter
{
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin:left top;
-moz-transform-origin:left top;


outline: 1px solid transparent;
}

小开

我遇到了这个问题，我用这种方式解决了它，我使用 SCSS，以便不重复相同的数字沿代码。下面的代码只是在缩放减小时移动元素，以便重新对齐。

$originalWidth: 100px;
$rate: 0.5;


parent {
width: $originalWidth;
}


parent > div {
transform: scale(1);
}


parent:hover {
width: $originalWidth*$rate;
}


parent:hover > div {
transform: translateX(($originalWidth * ($rate - 1))/2) scale($rate); /* the order matters*/
}

如果您愿意，您可以使用 CSS 变量和 calc()来摆脱 SCSS。

小开

我用这种方式解决了我和你一样的问题。

我有一个主容器，我想减少它

我的 css: 。网格-容器变换: 比例(0.6) ; 转换起源: 顶部中心; }

但是我的集装箱底部边距更大。然后我就这么做:

$mainGrid = $(’. grid-Container. full’) $mainGrid.css (‘ height’，$mainGrid.height () * .6) ;

小开

转换对象时留白的另一个想法

<div class="outer">
<div class="inner">
transformme
</div>
</div>

CSS

.outer { overflow:hidden }
.inner {
transform-origin:left top;
}

JS

var rate = 0.5;
var outerheight = $('.inner').outerHeight()*rate;
$('.inner').css({ transform: "scale("+rate+")" });
$('.outer').css({ height: outerheight });

还可以添加其他浏览器标记:-webkit-change、-moz-change 和-o-change

小开

用边际底部解决了这个问题(如果按比例缩小，它将是负数) :

#container {
display: inline-block;
border: 3px solid blue;
}


#content {
--scale: 0.5;


width: 200px;
height: 200px;
background: lightgreen;
transform: scale(var(--scale));
transform-origin: top left;
margin-bottom: calc((var(--scale) - 1) * 100%);
}

<div id="container">
<div id="content"></div>
</div>

小开

尝试同时使用十进制数字乘以图像的宽度和高度 (我使用 SCSS)

img{
width : 100px * 0.5;  // width reduced to half
height : 100px * 0.5; // height reduced to half
}

我希望这对2021年有所帮助！

小开

我的任务是把下拉菜单放到网站菜单上，按比例缩放到右上角0.5，宽度为500px。我解决了这个问题: 将下拉菜单包装到标记 div 中，然后将下一个 CSS 代码应用到包装器中:

div.scale_wrapper{
position: relative;
top: 34px;
margin-right: calc(500px * -0.5);
}

为了你当前的目的使用34px。 -0.5是比例

演示链接与下拉式在顶部网站菜单: https://demo.currency-switcher.com/

小开

我有一个简单的解决方案: 你可以把它放在另一个 div 中，它有 height:0px;。

小开

这很简单，你必须用高度来计算，如果出于某种原因，你把它倒过来！就像这里你们当前的 width: 500px;和 height: 220px;你们想要像 width: 220px; height: 500px;一样反转然后再次你们必须使用 margin-bottom: calc((0.6 - 1) * 500px);就是这样。

#parent {
display: inline-block;
outline: 5px solid black;
}


#child {
width: 500px;
height: 220px;
background: #555;
transform: scale(0.6);
transform-origin: top center;
margin-bottom: calc((0.6 - 1) * 220px);
}

<div id="parent">
<div id="child"> </div>
</div>

小开

如果你不需要 Firefox 的兼容性，你可以使用 {zoom:0.2}而不是 {transform: scale(0.2);}