用填充在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;
}

它将起作用as you want it to。

Answer 2

像这样的东西

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