我想解決一個小問題，但找不到任何好的答案:

當我在一個div(包含其他div)上使用一個刻度時，它會在div的“原始”寬度和高度周圍留下空白:

在縮放時，我如何移除div周圍的空格？

如果需要我可以用js！

編輯:以下是一些代碼:

超文本標記語言

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

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel) (你真的不需要知道這個包是如何完成的，它是一堆毫無意義的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類的時候

變換的工作原理是:

你的元素被渲染 你的元素被變換(移動，旋轉，縮放) 其他元素停留在它們被渲染的地方——在“原始元素”周圍 所以空白實際上就是元素最初呈現的方式。

如果您希望以不同的方式呈現元素的大小，并讓周圍的元素響應它，那么您應該在CSS中使用width和height。

或者您可以使用javascript之類的東西來調整大小。

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

我遇到了這個問題，我用這種方法解決了它，我用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。

我用那種方式解決了和你一樣的問題。

我有一個主容器，我想減少它

我的css: 。網格-容器.滿{ 變換:縮放(0.6)； 變換-原點:頂部中心； }

但是我的容器底部有更大的邊緣。 然后我做了:

$mainGrid = $('。grid-container . full’) $mainGrid.css('height '，$ main grid . height()* . 6)；

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

當你變換對象時，留白的另一個想法

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

你也可以添加其他瀏覽器標簽；-webkit-transform，-moz-transform，-o-transform

很簡單，你必須用高度來計算，如果出于某種原因你把它倒過來！像這里你現在的寬度:500px以及高度:220px你想反過來像width:220 px；高度:500px然后又要用margin-bottom:calc((0.6-1)* 500 px)；就是這樣。

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

我有一個簡單的解決方案:你可以把它放在另一個高度為0px的div中；。

嘗試用十進制數乘以圖像的寬度和高度。像這樣-& gt； (我用的是SCSS)

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

希望這對2021年有幫助！

我的任務是將下拉菜單放入網站菜單，縮放至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/

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

我已經通過將元素定位在絕對位置解決了這個問題。就像這樣，你可以通過調整頁邊空白來完全控制空間，把你的元素放在你想要的地方。

# element { position:absolute；比例:0.7；}

我通過在應用縮放的元素上添加“輪廓: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;
}