爲圖片生成框架

Question

我創建了圖庫，並且我想在圖片周圍創建框架。

但是這張圖片必須是可擴展的。此幀的寬度和高度由圖像的寬度和高度生成。

而且必須有通過JavaScript改變框架高度的可能性。

謝謝。

PS：首先，我必須有可能通過JavaScript使幀變窄。

Answer 1

這可能是非常棘手的問題。

如果您使用的是支持帆布現代瀏覽器，看看這個演示，做你在找什麼：CANVAS Demo

否則，你將需要創建8幅圖像（4個角和4個側面）兩側，其中都是以這樣的方式製作的，因爲它們可以平鋪以適應您需要的任何尺寸。

下一個技巧是如何構建框架。你可以在你的照片周圍創建DIV /表格來創建這種效果，但這會非常龐大​​而且不太乾淨。您最好的選擇是使用jQuery（或您最喜歡的lib）通過CSS類（例如「fancyFrame」）鉤住頁面上的所有圖像，並根據需要使用HTML標記包裝它們，以便使用上面創建的圖像通過CSS。

Answer 2

您可以使用A List Apart's Drop Shadow technique，它使用CSS和PNG爲圖像創建自動調整大小的投影。您可以修改技巧以創建可調整大小的框架。

您將需要四個div和四個圖像。角落將需要以45度角切割，透明度：

• 圖1 - 左上角和框架的頂部和左側。
• 圖2 - 框架的右上角和右側。
• 圖片3 - 左下角和幀
• 圖像4的底部 - 幀

Answer 3

縮小的Javascript幀的右下角是最容易的部分，真的。 一旦你有你的HTML/CSS設置，以便它已經擴展你可以設置寬度使用JavaScript這樣的：

var photo = document.getElementById('photoFrame'); 
photo.width = '200px'; 

Answer 4

如果我是你，我會確保我可以重複使用（重複）的圖像， #top-left, #top-right, #bottom-left, #bottom-right使用角的圖像作爲背景，同時擁有width和height集：那麼我會那樣做：其中

<div id="frame"> 
    <div id="top-left"></div> 
    <div id="top"></div> 
    <div id="top-right"></div> 

    <div id="left"></div> 
    <div id="imageSpace"></div> 
    <div id="right"></div> 

    <div id="bottom-left"></div> 
    <div id="bottom"></div> 
    <div id="bottom-right"></div> 
</div> 

。

和#top, #right, #bottom, #left爲他們的背景使用重複的圖像。

檢查附加的圖像，我把線條放在應該切割原始幀圖像的地方。

此方法將允許您更改#top/#bottom和#left/#right的寬度以增加幀的大小。

Answer 5

滑稽，我不得不這樣做確切的事情時，我曾在ImageKind.com。作爲參考，如果你去那裏的框架商店，如this one，請轉到第4步（添加墊子），然後單擊調整寬度，這裏有一個滑動條，可以或多或少地描述您正在描述的內容。

我原本有一對嵌套的DIV與大對立的L形框架作爲背景圖片。一點點螢火蟲檢查表明他們已經將其改爲桌子。效率更高，我敢肯定，因爲側面部件可以平鋪。