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

我有一個幀爲jpg，這樣的事情：如何將圖像設置爲響應圖像周圍的框架？

just an image found via google images, only used to ask this question

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

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

首先我想到了goold舊桌子。我想我可以使用multiple background images feature from CSS3。但是，這仍然有點冒失。

有沒有更好/更簡單的解決方案？

來源

2014-09-29 Teetrinker

多個背景不是一劈（它是在規格）。如果你不想使用多個背景，只需使用2個標籤並對其進行設計。 – Kinga 2014-09-29 09:58:53

你嘗試了什麼？ – HerrSerker 2014-09-29 10:01:48

multiple bg：http://jsfiddle.net/1uu8m118/1/ 2 div與bg：http://jsfiddle.net/1uu8m118/2/ – Kinga 2014-09-29 10:12:51

我認爲最簡單的方法是將寬度設置爲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/

來源

2014-09-29 10:29:58 kmike

謝謝你的努力，但你沒有得到我的問題的核心。 – Teetrinker 2014-09-29 11:38:48

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

回答

相關問題