css - 是否可以折叠 CSS 缩放内容周围的外部 ？

Question

我在未缩放的 <div> 中缩放了内容:

<style>
#outer { 
    background-color: blue; 
    padding: 3px;
}
#inner { 
    background-color: red;
    width: 400px; 
    height: 400px; 
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
</style>

<div id=outer>
    <div id=inner>
    </div>
</div>

看起来像这样:

这是一个 JS Fiddle也是。

问题是外层<div> - 关注 transform: scale内部<div>大小为 200px，但外部 <div>仍然包裹原来的 400px 大小。

我要折叠外层的尺寸<div>包装缩放后的内容，所以它应该看起来像这样:

在应用程序中，缩放属性是动态更改的，div 包含应随其缩放的内容。

有什么办法可以用 CSS 做到这一点吗？

失败了，有没有办法用 Javascript 做到这一点？

Answer 1

我读了一些书，显然您无法使用 CSS 从同级元素控制父元素。

所以我整理了一下FIDDLE , 并使用 jQuery 将外部元素调整为内部元素。我不确定它是否完全符合您的要求，但也许它会给您一个开始。

JS

$('#inner').hover(
    function(){
               var innerwidth = $('#inner').width();
                   innerwidth = innerwidth * 1.05;
               var innerheight = $('#inner').height();
                   innerheight = innerheight * 1.05;
               $('#outer').css({
                                width: innerwidth,
                                height: innerheight
                                 });
               },
    function(){
               $('#outer').css({
                                width: '600',
                                height: '400'
                                 });
               }
    );