为 <img> 大小小于页面的 <img> 显示一些背景颜色答案

【问题标题】：Show some background color for an <img> where <img> size is less than the page为 <img> 大小小于页面的 <img> 显示一些背景颜色
【发布时间】：2014-05-23 15:22:37
【问题描述】：

我正在使用以下 css 作为图像 - fiddle

img {
border: 3px solid #ddd;
margin-left: auto;
display: block;
margin-right: auto;
background: red;
}

这是相同的输出 - fiddle

但我想要这样的东西

我想要什么？

我希望如果图像不是全宽，那么上图所示的剩余空间应该填充一些颜色。

我知道和不想使用的东西

我知道我可以通过将图像标签包装在 div 中并使用该颜色设置 div 的背景来轻松完成此操作。我不能这样做，因为我正在为一个博客做这个 css 更改，而这个博客已经有很多帖子，我不想打开每个帖子并用 div 包装每个 img。

当时我在想可能有一个简单的 CSS hack，我可能会错过。请指教。

只有 CSS，不要使用 jQuery。

【问题讨论】：

标签： html css

【解决方案1】：

如果您知道图像宽度，则可以使用填充来实现。

由于您的图像宽度为 379px，我可以将水平填充设置为 calc(50% - 190px)

(379 / 2 = 189.5, round up to 190)

img{
    padding: 0px calc(50% - 190px);
}

JSFiddle

【讨论】：

有趣，但我不知道图像宽度。因为这是一个博客，其中会有多个不同大小的图像。有什么替代方法吗？
您可以将图像宽度固定为百分比，例如width: 80%; padding: 0 10%; JSFiddle
图像像素化，对于较小的图像会更糟糕。
不幸的是，这是使用严格的 CSS（我知道）的唯一方法。如果你想要一个适用于所有尺寸的动态解决方案，你需要 jQuery/JS。
@Yasser 我唯一能想到的另一件事是使用 box-sizing 来限制带有填充的图像宽度。但是，这将产生与以前相同的问题，因为您实际上是将填充的宽度定义为静态数字。 JSFiddle