带有填充的 div 内的 img

Posted 2023-03-06

【中文标题】带有填充的 div 内的 img

【英文标题】：img inside div with padding

【发布时间】：2012-09-02 06:39:11

【问题描述】：

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

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

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

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

【问题讨论】：

问题是wrapper div 的宽度。如果您不想为图像设置高度/宽度，则不应为包含图像的 div 设置高度/宽度。

我看到了您的问题并享受了它的格式。您想获得保管人徽章吗（完成至少一项审核任务。此徽章每个审核类型授予一次），所以请查看您的姓名您的页面顶部，只需点击审核。

@aminkThanks.will 试试看:)

【参考方案1】：

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

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

它将工作as you want it to。

【参考方案2】：

类似的东西

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