10

問題: div 内の子要素に適用された css3 変換は、"overflow: auto;" を使用する場合に、含まれる div のスクロールバーの scrollHeight と scrollWidth を計算するときに、ブラウザー (FF5、Chrome12、IE9) によって無視されます。

<style type="text/css">
div{ width: 300px;height:500px;overflow:auto; }
div img {
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
}
</style>    
<div><img src="somelargeimage.png" /></div>

望ましくない動作を示すjsfiddleの小さなテストをまとめました。

http://jsfiddle.net/4b9BJ/

基本的に、回転とスケーリングに css3 変換を使用して単純な Web ベースの画像ビューアーを作成しようとしています。固定幅/高さの div をスクロールして、含まれる画像の完全なコンテンツを表示できるようにしたいと考えています。

この問題を処理する賢明な方法、または大まかな回避策はありますか? どんな助けでも大歓迎です。

4

1 に答える 1

3

各変換に追加の div を追加し、これらの div に固定幅を設定し、オーバーフローをクリッピングすることで、それらを正しいサイズにすることができました。しかし、その後、 position: relative と top: blah; を使用する必要がありました。左: 何とか画像を正しい位置に移動します。 http://jsfiddle.net/4b9BJ/7/

于 2011-07-12T12:48:13.137 に答える