css3比例周围的空白
Posted
技术标签:
【中文标题】css3比例周围的空白【英文标题】：White space around css3 scale 【发布时间】：2013-04-29 10:20:56 【问题描述】：我有一个小问题想要解决，但找不到任何好的答案：
当我在 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 类的时候
【问题讨论】：
显示一些相关代码。无法通过屏幕截图回答问题。 这样更清楚吗？代码没什么大不了，真正让我卡住的是它的规模和周围的空白：) 你可以把它放在另一个有overflow:hidden的div中，然后调整那个div的大小。
当我添加这个时： .nextpack overflow: hidden;显示：块； -webkit 转换：比例（0.2）； -moz 变换：比例（0.2）； -o-变换：比例（0.2）；变换：比例（0.2）； 我周围还有空白...
调整transform-origin 属性，默认情况下，该属性将缩放框垂直和水平居中。 ***.com/q/43020800/3597276
【参考方案1】：
transform 的工作原理是：
-
您的元素被渲染
您的元素被转换（移动、旋转、缩放）
其他元素保留在它们被渲染的位置 - 围绕“原始元素”
所以空白实际上就是元素最初呈现的方式。
如果你想以不同的方式呈现元素的大小并让周围的元素响应它，你应该在 CSS 中使用 width 和 height。
或者你可以使用类似 javascript 的东西来调整大小。
【讨论】：
好吧，我不能用宽度和高度来做，因为我要调整大小的元素不是百分比，而且这样做真的很复杂。你会如何在 js 中做到这一点？【参考方案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 */
【讨论】：
他的小提琴有死链接，这是一个更新的分叉：jsfiddle.net/2KxSJ/243 这个答案和小提琴充满了额外的代码。关键是当包裹元素的height和width动画化时，文档流会发生变化。【参考方案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。
【讨论】：
我认为社区受益于阅读解释为什么会起作用，即使它只是一个小解释。不仅仅是“这是我的代码”。 我认为这是不言自明的，它只是在缩放减小时将元素向右推。不过我会添加一些评论【参考方案4】：我像你一样解决了我的问题。
我有一个主容器，我想减少它
我的CSS：
.grid-container.full
transform: scale(0.6);
transform-origin: top center;
但我的容器底部边距较大。 然后我就这样做了：
$mainGrid = $('.grid-container.full')
$mainGrid.css('height', $mainGrid.height() * .6);
【讨论】：
transform-origin: top center 选项是我缺少的东西 - 我的父容器很大，它决定从下到上进行转换 - 所以它创建了大量的“空白”。【参考方案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
【讨论】：
【参考方案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>【讨论】：
【参考方案7】：我有一个简单的解决方案：您可以将其全部放在另一个具有 height:0px; 的 div 中。
【讨论】：
【参考方案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>【讨论】：
【参考方案9】：尝试使用十进制数字将图像的宽度和高度相乘。像这样-> （我用的是 SCSS）
img
width : 100px * 0.5; // width reduced to half
height : 100px * 0.5; // height reduced to half
我希望这对 2021 年有所帮助！
【讨论】：
这只会导致元素的 CSS 错误，而无需使用calc 函数【参考方案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/
【讨论】：
【参考方案11】：如果您不需要 Firefox 兼容性，您可以使用 zoom:0.2 而不是 transform: scale(0.2);
【讨论】：
【参考方案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;
【讨论】：
我不知道为什么，但这实际上在所有浏览器中都非常有效！你是怎么做到的？ 不起作用，如果起作用了，很高兴知道原因。 我删除了轮廓：1px 纯透明，它仍然对我有用。我所需要的只是起源声明。事先 -transform 正在缩放所有空白并将缩小的图像居中，所以这个答案对我有帮助 这行得通，刚刚经过测试，也可以在 JavaScript 中工作 - 只需设置元素样式：.transformOrigin='left top'; .. 之后，只需使用 .getBoundingClientRect().width 重新调整元素的父/包装器大小 ..（或高度）。以上是关于css3比例周围的空白的主要内容，如果未能解决你的问题，请参考以下文章