オーバーフローが隠されている場合、CSS変換による縮小画像が切り取られます

ビューポートよりも大きな画像（またはより一般的には<div>にあるコンテンツ）があります。ユーザーは、私はCSSプロパティオーバーフローが隠されている場合、CSS変換による縮小画像が切り取られます

overflow: hidden;

これは、スクロールして表示されるスクロールバー防止を設定していない可視画像の一部を見ることが期待されていないので

。

そしていくつかの点（ユーザ対話）の画像は、例えば、CSSアニメーションと縮小される：画像が縮小として

transition: transform 0.5s; 
transform: scale(0.5);

残念ながら、最初に見えなかった、それの一部は依然としてとして隠されたままでありますoverflow: hiddenプロパティのためのサイズが変更されました

これを回避する方法はありますか？ここで

がfiddle

HTML

<body> 
    <div id="container"> 
     <img id="picture" src="https://www.nasa.gov/sites/default/files/images/453915main_2010-3355_full.jpg"/> 
    </div> 
</body>

CSS

#container { 
    overflow: hidden; 
    position: absolute; 
    display: block; 
    left:  10px; 
    top:  10px; 
    width: 500px; 
    height: 500px; 
} 

#picture { 
    position: absolute; 
    width: 3000px; 
    height: 2000px; 
    left: -1000px; 
    top:  -500px; 
}

JSである

出典

2016-10-25 Paolo

質問に適用されながらoverflow: hiddenがラッパーに適用されます（「なぜこのコードは動作しないの？」）

は希望を含める必要があります特定の問題またはエラー、および質問自体にそれを再現するのに必要な最短のコードが含まれます。 – LGSon

@LGSonが最新の質問に更新しました – Paolo

$(function() 
{ 
    $('#container').on('click', resize); 
} 
); 

function resize() 
{ 
    $('#container').css(
    { 
     'transition': 'transform 0.5s', 
     'transform': 'scale(0.5)' 
    }); 
}

変換が変換素子のwidthとheightプロパティにも適用されるので、問題が発生します。

この問題は、同じサイズの<div>ラッパーにスケーリング<div>を封入することによって解決することができます。変換がまだデバッグの助けを求める包ま<div>

Fiddle

出典

2016-10-25 16:31:11 Paolo

オーバーフローが隠されている場合、CSS変換による縮小画像が切り取られます

答えて

関連する問題