css3刻度周围的空白

我想解决一个小问题，但找不到任何好的答案：

当我在一个div（包含其他div）上使用刻度时，它会在div的“原始”宽度和高度周围留下空白：

缩放时，如何删除div周围的withe空格

如果需要，我可以使用js

编辑：以下是一些代码：

HTML

<div class="pull-right nextpack">

                    <div class="quarter scale-thumb">

                        <div class="up">
                            <div class="inner" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                        </div>

                        <div class="face">
                            <div class="top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                            <div class="bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                        </div>

                        <div class="cote-droit">
                            <div class="inner">
                                <div class="cote-droit-top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                                <div class="cote-droit-bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                            </div>
                        </div>

                    </div>


                </div>

---

PS：第一张图片是当我没有添加缩放拇指类时，

transform

的工作原理是：

您的元素将被渲染

元素被变换（移动、旋转、缩放）

其他元素停留在渲染的位置-围绕“原始元素”

因此，空白实际上就是元素最初呈现的方式

如果希望以不同的方式渲染元素的大小并使周围的元素响应，则应在CSS中使用

宽度

和

高度

---

或者您可以使用javascript之类的东西来调整大小。

解决方案是将元素包装在容器中，并在scale（）完成时调整其大小

JSFIDLE演示：

有关守则如下：

#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;
}

---

我遇到了这个问题，我用这种方式解决了它，我使用了SCS，以避免代码中重复相同的数字。下面的代码只是随着缩放的减小向右移动元素，以便重新对齐

$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（）

摆脱SCS。

我用这种方法解决了我和您一样的问题

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

我的css：

.grid-container.full{
变换：比例（0.6）；
变换原点：顶部中心；
}

但我的容器底部有更大的余量。 然后我做：

$mainGrid=$（'.grid container.full'）
$mainGrid.css（'height'，$mainGrid.height（）*.6）
变换对象时使用空格的另一种方法

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

js

还可以添加其他浏览器标记-webkit transform、-moz transform、-o-transform解决了边距底部的问题（缩小时为负值）：


#容器{
显示：内联块；
边框：3件纯蓝；
}
#内容{
--比例：0.5；
宽度：200px；
高度：200px；
背景：浅绿色；
变换：标度（var（--scale））；
变换原点：左上角；
保证金底部：calc（（var（--scale）-1）*100%）；
}
尝试使用十进制数字乘以图像的宽度和高度。像这样->
（我使用了SCSS）

我希望这对2021年有所帮助
 显示一些相关代码。这个问题不可能从截图上回答。这更清楚吗？代码没什么大不了的，实际上是它的比例和它周围的空白让我卡住了：）你可以把它放在另一个有溢出：隐藏的div中，然后调整这个div的大小。当我添加这个时：.nextpack{overflow:hidden；display:block；-webkit transform:scale（0.2）；-moz transform:scale（0.2）；-o-transform:scale（0.2）；-o-transform:scale（0.2）；变换：比例（0.2）；}我周围仍然有空白…调整
变换原点
属性，默认情况下，该属性将缩放框垂直和水平居中。我不能用宽度和高度进行调整，因为我要调整大小的元素不是百分比，而且这样做非常复杂。在js中你会怎么做？我不知道为什么，但这在所有浏览器中都能令人惊讶地工作！你是怎么做到的？不起作用，如果起作用，很高兴知道原因。我删除了轮廓：1px实心透明，它对我仍然有效。我所需要的只是origin语句。之前-transform是缩放所有空白并将缩小的图像居中，所以这个答案是正确的这个方法可以工作，刚刚测试过，在JavaScript中也可以工作-只需设置元素样式：
.transformOrigin='left top'；
。然后使用
.getBoundingClientRect（）.width
（或height）重新调整元素的父级/包装大小即可他的小提琴有死链接，这里有一个更新的叉子：我认为社区受益于阅读一个解释，解释为什么它起作用，即使它是一个小的解释。不仅仅是“这是我的代码”。我认为这是不言自明的，它只是随着缩放的减小而将元素向右推。我将添加一些注释，因为我缺少了
变换原点：顶部居中
选项-我的父容器很大，它决定从底部向上变换-因此它创建了大量的“空白”。这只会导致元素的CSS中出现错误，如果不使用
calc
函数，该元素将不会出现错误
<div class="outer">
    <div class="inner">
        transformme
    </div>
</div>

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

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

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