CSS css3 比例尺周围的空白区域
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16385578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
White space around css3 scale
提问by Pretty Good Pancake
I have a small issue I want to fix, but can't find any good answer :
我有一个小问题想解决,但找不到任何好的答案:
When I use a scale on a div (which contains other divs), it leave white space around, from the "original" width and height of my div :
当我在 div(包含其他 div)上使用比例尺时,它会从我的 div 的“原始”宽度和高度留下空白区域:
How can I remove the withe space around the div while scaled ?
如何在缩放时删除 div 周围的空间?
I can use js if needed !
如果需要,我可以使用 js!
EDIT: Here is some code :
编辑:这是一些代码:
HTML
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(you really don't need to know how the pack is done, it's a lot of css3 for nothing, basically just skew, rotate, scale to make a 3D render from a flat template)
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 : The first pic is when I don't add the scale-thumb class
PS:第一张图片是当我不添加 scale-thumb 类时
采纳答案by Martin Turjak
solution is to wrap the element inside a container, and resize it too while the scale() is done
解决方案是将元素包裹在容器内,并在 scale() 完成时调整其大小
Jsfiddle demo: http://jsfiddle.net/2KxSJ/
jsfiddle 演示:http: //jsfiddle.net/2KxSJ/
relevant code is:
相关代码是:
#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 */
}
回答by Martin Turjak
how transform
works is:
如何transform
工作原理是:
- your element gets rendered
- your element gets transformed (moved, rotated, scaled)
- other elements stay where they got rendered - around the "original element"
- 你的元素被渲染
- 您的元素被转换(移动、旋转、缩放)
- 其他元素留在它们被渲染的地方——围绕“原始元素”
so the white space is really just the way the element was rendered in the first place.
所以空白实际上就是元素最初呈现的方式。
You should use width
and height
in CSS if you want to render the size of elements differently and have the surrounding elements respond to it.
如果要以不同的方式呈现元素的大小并让周围的元素对其做出响应,则应该在 CSS 中使用width
和height
。
Or you could use something like javascript to resize things.
或者您可以使用诸如 javascript 之类的东西来调整大小。
回答by Cristian Traìna
I encountered this problem and I solved it in this way, I used SCSS in order to don't repeat the same numbers along the code. The below code just moves the element right as the zoom decreases, in order to re-align it.
我遇到了这个问题,我以这种方式解决了它,我使用了 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*/
}
You can get rid of SCSS just using CSS variables and calc()
, if you prefer.
calc()
如果您愿意,您可以仅使用 CSS 变量和 来摆脱 SCSS 。
回答by Pablo Papalardo
I resolved my problem like yours that way.
我像你这样解决了我的问题。
I have a main container and I want decrease it
我有一个主容器,我想减少它
my css:
.grid-container.full {
transform: scale(0.6);
transform-origin: top center;
}
我的CSS:
.grid-container.full {
transform: scale(0.6);
transform-origin: top center;
}
but my container had the bigger margin bottom. then I do it:
但是我的容器底部的边距更大。然后我这样做:
$mainGrid = $('.grid-container.full')
$mainGrid.css('height', $mainGrid.height() * .6);
$mainGrid = $('.grid-container.full')
$mainGrid.css('height', $mainGrid.height() * .6);
回答by formedya
Another idea for white spaces when you transform objects
变换对象时空白的另一个想法
<div class="outer">
<div class="inner">
transformme
</div>
</div>
css
css
.outer { overflow:hidden }
.inner {
transform-origin:left top;
}
js
js
var rate = 0.5;
var outerheight = $('.inner').outerHeight()*rate;
$('.inner').css({ transform: "scale("+rate+")" });
$('.outer').css({ height: outerheight });
Also you can add other browser tags; -webkit-transform, -moz-transform, -o-transform
您也可以添加其他浏览器标签;-webkit-transform、-moz-transform、-o-transform
回答by Ubby
I solved this with by adding an 'outline: 1px solid transparent' to the element where the scale is applied on.
我通过向应用了比例尺的元素添加一个 ' 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;
}