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

注：第一张图片是我没有添加“scale-thumb”类时的效果

- Pretty Good Pancake

---

展示一些相关的代码。从截图中无法回答问题。 - Dirk McQuickly

这样更清晰吗？代码并不是什么大问题，真正困扰我的是它周围的规模和空白区域 :) - Pretty Good Pancake

你可以将所有内容放在另一个带有 overflow:hidden 的 div 中，然后调整该 div 的大小。 - Dave

当我添加以下内容时： .nextpack { overflow: hidden; display: block; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); }我仍然有周围的空白... - Pretty Good Pancake

通过调整transform-origin属性，可以使缩放的盒子在垂直和水平方向上居中，默认情况下。https://dev59.com/dKDia4cB1Zd3GeqPCFUz - Michael Benjamin

Answer 1

transform的工作原理如下：

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

因此，白色空间实际上只是元素最初呈现方式的一部分。

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

或者，您可以使用类似Javascript的东西来调整大小。

- Martin Turjak

---

好的，我无法使用宽度和高度来完成此操作，因为我想要调整大小的元素不是以百分比表示的，而且将其转换为百分比会非常复杂。您会如何在JS中实现？ - Pretty Good Pancake

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 */
}

- user652649

---

他的JSFiddle链接已经失效了，这里提供一个更新的版本：http://jsfiddle.net/2KxSJ/243/ - The Onin

这个答案和fiddle里有很多额外的代码。关键点是当动画包装元素的height和width时，文档流会发生变化。 - koktavy

对于未来的读者 - 容器指定了两个状态的确切宽度/高度。这里没有什么特别的。 - bendytree

Answer 3

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

- Vitaliy Ulantikov

---

关于基于CSS的解决方案，我认为这个是最稳定的。 - Alleo

使用var()很好，可以使一切清晰和整洁。 - undefined

Answer 4

我遇到了这个问题，我用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。

- Christian Vincenzo Traina

---

我认为社区受益于阅读为什么这样做有效的解释，即使只是一个简短的解释。不仅仅是“这是我的代码”。 - Juan Hurtado

我认为这很容易理解，随着缩放比例的减小，它只是将元素向右推。不过我会添加一些注释。 - Christian Vincenzo Traina

Answer 5

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

我有一个主容器，我想缩小它。

我的CSS代码如下：

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

但是我的容器底部的边距变得更大了。

然后我这样做：

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

- Pablo Papalardo

---

“transform-origin: top center”选项是我所缺失的东西 - 我的父容器非常大，它决定从底部向上进行变换 - 因此创建了大量的“空白空间”。 - Brian Powell

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>

- Sagar Roy

Answer 7

当你对物体进行变换时，另一个处理空白区域的想法：

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

- Alper AKPINAR

Answer 8

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

- Biet Khong

Answer 9

我有一个任务，需要将下拉菜单放置在网站菜单中，位于右上角，缩放比例为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/

- realmag777

Answer 10

尝试使用小数来乘以图像的宽度和高度。就像这样 ->（我使用了SCSS）

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

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

- JoyShaheb

---

这只会在元素的CSS中使用calc函数时出现错误，不使用该函数则不会出错。 - a.mola