Question

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

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

enter image description here

如何在缩放时删除div周围的空格？

如果需要，我可以使用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>

CSS （你真的不需要知道包是怎么做的，它是很多css3什么都没有，基本上只是倾斜，旋转，缩放以从平面模板进行3D渲染）

.quarter.scale-thumb
{
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}

PS：第一张照片是我不添加scale-thumb类

的时候

Answer 1

解决方案是将元素包装在容器中，并在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 */
}

Answer 2

transform如何运作：

您的元素会被渲染
你的元素被转换（移动，旋转，缩放）
其他元素留在渲染的地方 - 围绕“原始元素”

所以白色空间实际上就是元素首先呈现的方式。

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

或者您可以使用类似javascript的内容来调整大小。

Answer 3

我遇到了这个问题并且我用这种方式解决了它，我使用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。

Answer 4

我以这种方式解决了我的问题。

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

我的CSS： .grid-container.full { transform: scale(0.6); transform-origin: top center; }

但是我的集装箱底边更大。然后我这样做：

$mainGrid = $('.grid-container.full') $mainGrid.css('height', $mainGrid.height() * .6);

Answer 5

我有一个简单的解决方案：您可以将其全部放在另一个具有 height:0px; 的 div 中。

Answer 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-transform，-moz-transform，-o-transform

Answer 7

尝试使用十进制数乘以图像的宽度和高度。像这样-> （我用过 SCSS）

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

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

Answer 8

我的任务是将下拉菜单放入缩放至 0.5 右上角且宽度为 500 像素的站点菜单中。我解决了它：将下拉菜单包装到标签 div 中，然后将下一个 CSS 代码应用到包装器中：

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

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

顶部站点菜单中带有下拉菜单的演示链接：https://demo.currency-switcher.com/

Answer 9

我通过在应用比例尺的元素上添加“轮廓：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;
}

css3规模周围的白色空间

9 个答案: