css3比例周围的空白

Question

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

当我在 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 类的时候

Answer 1

transform 的工作原理是：

1. 您的元素被渲染
2. 您的元素被转换（移动、旋转、缩放）
3. 其他元素保留在它们被渲染的位置 - 围绕“原始元素”

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

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

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

Answer 2

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

变换对象时留白的另一种想法

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

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

Answer 7

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

Answer 8

解决了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>

Answer 9

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

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

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

Answer 10

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

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

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

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

Answer 11

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

Answer 12

我通过向应用比例的元素添加“outline: 1px solid transparent”解决了这个问题。

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