jQuery 缩放 div 内容（嵌套 div）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9209267/
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
jQuery scale div contents (nested div)
提问by julifos
How can I get the blue box to scale with the red one? (using jQuery-UI)
我怎样才能让蓝色框与红色框一起缩放？（使用 jQuery-UI）
This is the basic code, CSS:
这是基本代码，CSS：
#outer {
position:relative;
height:100px;
width:150px;
z-index:1;
background:#F00;
}
#nested {
position:absolute;
left:50px; top:20px;
width:50px; height:20px;
z-index:2;
background:#00F;
cursor:pointer;
}
And HTML:
和 HTML：
<div id="outer">
<div id="nested" onclick="$('#outer').effect('scale', {scale:'content',percent:50}, 1000);" />
</div>
回答by techfoobar
Check this fiddle: http://jsfiddle.net/techfoobar/Y54EB/4/
检查这个小提琴：http: //jsfiddle.net/techfoobar/Y54EB/4/
The solution is basically to specify the dimensions and position of the nested div in % w.r.t. parent than in pixels.
解决方案基本上是在 %wrt parent 中指定嵌套 div 的尺寸和位置，而不是以像素为单位。
回答by james
I realize this is old, but if I understand you correctly, I was trying to achieve the same thing and came across this jQuery plugin that does the job:
我意识到这是旧的，但如果我理解正确，我试图实现同样的目标，并遇到了这个 jQuery 插件，它可以完成这项工作：
回答by Manse
Change your CSS to use percentages instead :
更改您的 CSS 以使用百分比：
#nested {
position:absolute;
left:30%; top:20%;
width:50%; height:20%;
z-index:2;
background:#00F;
cursor:pointer;
}
This way the #nesteddiv is always in proportion to the outerdiv - also keeps its positioning
这样#nesteddiv 总是与div 成比例outer- 也保持其定位
Working example here -> http://jsfiddle.net/Y54EB/5/
这里的工作示例-> http://jsfiddle.net/Y54EB/5/
回答by ggzone
jquery:
查询：
$('#outer, #nested').effect('scale', {scale:'content',percent:50}, 1000);
if you want also to reposition the nested blue box, dont use fixed Pixel positioning in CSS... use %
如果您还想重新定位嵌套的蓝色框，请不要在 CSS 中使用固定的像素定位...使用 %
