如何創建靈活的圖像框架？

Question

我想在圖像頂部創建PNG框架，它動態顯示，因此所有圖像的圖像高度和寬度都不相同。

http://thejourneyhomebook.com/photos/index.html

這是最後的結果，我想實現。這可能使用jQuery。

可以使用更多的圖像和div。

謝謝

Answer 1

我寫了一個jQuery插件來做這個回來。幾分鐘前我剛剛將它添加到Google Code。希望對你有幫助！

http://code.google.com/p/jquery-imageframe/

Answer 2

是的，這是可能的。

你將有8個divs每個圖像。

HTML：

<div class="imageContainer"> 
    <div class"tl"></div> 
    <div class"t"></div> 
    <div class"tr"></div> 
    <div class"l"></div> 
    <div class"r"></div> 
    <div class"bl"></div> 
    <div class"b"></div> 
    <div class"br"></div> 
    <img src="myImage" /> 
</div> 

CSS：

.imageContainer{ 
    position:relative; 
} 

.imageContainer div { 
position:absolute; 
z-index:2; 
} 

.imageContainer .tl, .imageContainer .tr, .imageContainer .bl, .imageContainer .br { 
z-index:3; 
} 

.imageContainer .t, .imageContainer .tl, .imageContainer .tr{ 
top: -20px; 
} 

.imageContainer .b, .imageContainer .bl, .imageContainer .br{ 
bottom: -20px; 
} 


.imageContainer .l, .imageContainer .tl, .imageContainer .bl{ 
left: -20px; 
} 

.imageContainer .r, .imageContainer .tr, .imageContainer .br{ 
right: -20px; 
} 

所有你現在要做的是把圖像精靈和設置寬度和高度。 設置寬度和左上角的右側和底部用jQuery

GL高度

Answer 3

你需要在圖像周圍多了一些包裝（Ghommey的解決方案），並有足夠的造型，你會得到的東西像閃存中的9-slice scaling一樣。

您也可以使用後文描述的CSS3方法 - 但它只能使用最先進的瀏覽器。

Answer 4

您的示例頁面只有三種不同大小的固定大小的圖像，這看起來很簡單。爲了支持任何可能的圖像大小，您需要更多的標記，如Ghommey's answer所示。

你最好打賭可能只是使用tested-and-tried solution。