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

Question

我有一个 jpg 格式的框架，像这样:

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

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

首先我想到了金色的旧 table 。

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

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

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/