带有填充的 div 内的 img答案

【问题标题】：img inside div with padding带有填充的 div 内的 img
【发布时间】：2012-09-02 06:39:11
【问题描述】：

我正在尝试将 div 包裹在图像周围。图像大于 div 大小。通过使用Overflow: hidden，我将图像的一部分隐藏在 div 之外。现在我想为我的 div 设置填充，所以图像不会填满所有 div 区域。但似乎img 忽略了右下角的填充值。

为了更清楚，这就是我现在所拥有的 (http://jsfiddle.net/sAYEq/4/)：

这就是我想要实现的目标：

请注意，我不想设置图像的宽度/高度，因为我希望图像保持其实际大小，并且不应显示 div 之外的部分。

【问题讨论】：

【解决方案1】：

只需给您的包装器100% 宽度和高度：

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

【讨论】：

【解决方案2】：

类似的东西

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

【讨论】：