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;
}