html - 画像を拡大縮小して、それがバインドされているボックスを超えることはできますか?

Question

<img>を動的にサイズ変更しようとしています。ときどき、そのイメージが束縛されているボックスを超える必要があるのですが、それが止まって歪んでいるように見えます。これはできますか？

<div>
 <img src='smjpg.jpg' />
</div>

div{
  width: 20px;
}
img{
  width: 100px;
}

Answer 1

境界に CSS を使用するだけdivです。

#imgDiv {
    overflow:visible;
}

Answer 2

サイズを固定せずに、親コンテナーを他の要素用に拡張したい場合は、floatプロパティまたはposition: absolute子要素での使用を検討してください。絶対配置では、ページのフローから子が削除されるため、親コンテナーには何も展開されません。オーバーフローが表示され、clearfix が使用されていない場合、フローティングには同様の視覚効果がありますが、子はその兄弟のレイアウトに影響します。ここにデモがあります: http://jsfiddle.net/lpd_/rd4HP/3/ (結果の幅を調整してみてください)。