html - パディング付きのdiv内のimg

Question

画像の周りにdivをラップしようとしています。画像はdivサイズよりも大きくなっています。を使用しOverflow: hiddenて、画像の一部をdivの外側に隠しました。次に、divにパディングを設定したいので、画像がすべてのdiv領域を埋めることはありません。imgしかし、は右下のパディング値を無視し ているようです。

より明確にするために、これが私が今持っているものです（http://jsfiddle.net/sAYEq/4/）：

そして、これが私が達成しようとしていることです：

画像を実際のサイズにしたいので、画像の幅/高さを設定したくないことに注意してください。divの外側の部分は表示されません。

Answer 1

ラッパーの100%幅と高さを指定するだけです。

#wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    border: 1px solid green;
}

それはあなたが望むように動作します。

Answer 2

このようなもの

.parent {
  width: 400px; 
  height: 200px;
  outline: 1px solid red;
  overflow: hidden;
  border: 10px solid white;
}