如何将图像设置为响应图像周围的框架？

Question

我有一个jpg框架，如下所示：

在此框架内，我想显示图像。我希望框架与内部图像一起调整大小。

使用CSS执行此操作的好方法是什么？

首先我想到了旧桌子。

然后我想我可以使用multiple background images feature from CSS3。但那仍然感觉有点hacky。

有没有更好/更简单的解决方案？

Answer 1

我认为最简单的方法是将宽度设置为100％以使图像响应，并使用填充来操作以显示此图像的背景。

实施例： HTML

<div>
<img src="http://icons.iconarchive.com/icons/benjigarner/softdimension/256/Image-ready-CS-2-icon.png" /></div>

CSS：

div {
    width: 300px;
    height: 300px;
}

img {
    padding: 50px 15px 30px 20px;
    background: red;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

结果： http://jsfiddle.net/pzy6wg3f/2/