如果孩子使用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>