显示<img/>的一些背景颜色，其中<img/>大小小于页面

Question

我使用以下css作为图片 - fiddle

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

以下是相同的输出 - fiddle

但我想要这样的东西

我想要什么？

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

我知道和不想使用

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

认为可能有一个简单的CSS黑客，我可能会错过。请指教。

只有CSS，请不要jQuery。

Answer 1

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

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

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

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

JSFiddle