76

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

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

在此处输入图像描述

如何在缩放时删除 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 类时

4

12 回答 12

41

工作原理transform是：

  1. 你的元素被渲染
  2. 您的元素被转换（移动、旋转、缩放）
  3. 其他元素停留在它们被渲染的地方——围绕“原始元素”

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

如果你想以不同的方式呈现元素的大小并让周围的元素响应它，你应该在 CSS 中使用width和。height

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

于 2013-05-05T15:50:21.107 回答
36

解决方案是将元素包装在容器内，并在 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 */
}
于 2013-05-05T19:45:29.620 回答
5

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

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

于 2017-09-04T20:29:35.437 回答
5

我像你这样解决了我的问题。

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

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

但我的容器底部边距较大。然后我这样做：

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

于 2019-01-29T19:51:32.657 回答
2

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

<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

于 2019-10-17T12:23:22.383 回答
2

解决了 margin-bottom 的问题（如果缩小，它将是负面的）：

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

于 2021-01-13T21:38:35.777 回答
2

很简单，你必须用高度来计算，如果由于某种原因你把它倒过来！就像这里你的电流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>

于 2021-09-02T15:59:05.763 回答
1

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

于 2021-07-13T07:59:13.953 回答
0

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

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

我希望这对 2021 年有帮助！

于 2021-03-15T19:50:43.077 回答
0

我的任务是将下拉菜单放入缩放到右上角 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/

于 2021-06-25T15:05:06.507 回答
0

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

于 2021-10-30T23:32:07.933 回答
-3

我通过向应用比例的元素添加“轮廓：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;
}
于 2016-08-17T15:01:44.467 回答