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

【问题标题】：How to set an image as a frame around a responsive image?如何将图像设置为响应图像周围的框架？
【发布时间】：2014-09-29 18:29:58
【问题描述】：

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

在这个框架内，我想显示一个图像。我希望框架与里面的图像一起调整大小。

用 CSS 做这件事的好方法是什么？

首先我想到了古旧的桌子。

然后我想我可以使用multiple background images feature from CSS3。但这仍然让人觉得有点老套。

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

【问题讨论】：

多背景不是 hack（它在规范中）。如果您不想使用多个背景，只需使用 2 个标签并设置它们的样式。
multiple bg: jsfiddle.net/1uu8m118/1 2 div's with bg: jsfiddle.net/1uu8m118/2
我想这感觉很hacky，因为我必须使用8张或更多的背景图片。
border-image 将是要走的路。

标签： html image css

【解决方案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/

【讨论】：

感谢您的努力，但您没有找到我问题的核心。