子供がcss3を使用して拡大縮小した場合、親コンテナがオーバーフローしないTransform：Scale

Question

私はCSS3変換を行っています。

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

私はdiv内にイメージを持っています。 parentDivは画像の高さごとにy方向にスクロールします。しかし、私がcss3スケールでimgを変換すると、imgの幅は増加しますが、親divはx方向にスクロールしません。 Jsfiddleリンク:: https://jsfiddle.net/yf48ga22/

Answer 1

imageは両方axis i.e x and yにscrollを見るために存在してscale divれ、scalingあなたimageの代わりに参照してください。私は少しだけ変更を加えました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>