如何將圖像設置爲響應圖像周圍的框架？

Question

我有一個幀爲jpg，這樣的事情：

這裏面框，我要顯示的圖像。我希望框架可以隨着內部圖像一起調整大小。

什麼是用CSS做這件事的好方法？

首先我想到了goold舊桌子。我想我可以使用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/