如果孩子使用css3烫伤，父容器不会溢出Transform：Scale

Question

我正在进行CSS3转换。

parentDiv{ 
    overflow:scroll; 
} 
img{ 
    width:100%; 
    height:auto; 
} 

我有一个div内的图像。 parentDiv按照图像高度在y方向上滚动。但是当我用css3缩放比例转换img时，img width会增加，但父div不会在x方向上滚动。 的jsfiddle链接:: https://jsfiddle.net/yf48ga22/

Answer 1

见的，而不是你的scalingimage，其中scale divimage存在看scroll两个axis i.e x and y。我只做了一些改动html structure只是为了解这个jsFiddle。

$(document).ready(function(){ 
 
\t $("#box > .ch").css({ 
 
    \t 'transform' : 'scale(1.8)', 
 
    'transition' : '1s ease' 
 
    }); 
 
});

#box{ 
 
    overflow-x: auto; 
 
    overflow-y: auto; 
 
    display: flex; 
 
    background:red; 
 
    flex-direction: column; 
 
} 
 
#box > .ch{ 
 
    flex:1; 
 
    flex-shrink: 0; 
 
    background: #fff; 
 
    overflow: auto; 
 
} 
 
#box > .ch > img{ 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box"> 
 
    <div class="ch"> 
 
    <img src = "https://s3-us-west-2.amazonaws.com/cbsapp/package_content/s78c_e4vt6/main_images/pg_4.jpg"> 
 
    </div> 
 
</div>