Question

我想在Image的顶部创建PNG Frame，它动态生成，因此所有图像的图像高度和宽度都不同。

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

这是我想要实现的最终结果。这可能是使用jQuery。

使用更多图像和div可以。

感谢

Answer 1

是的，这是可能的。

每张图片有8个div。

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 2

你需要在图像周围添加一些包装器（Ghommey的解决方案），并且如果有足够的样式，你会在flash中获得类似9-slice scaling的内容。

你也可以使用帖子中描述的CSS3方法 - 但它只适用于最先进的浏览器。

Answer 3

您的示例页面只有三种不同大小的固定大小的图像，这看起来很简单。为了支持任何可能的图像大小，您需要更多标记，如Ghommey's answer中所示。

您最好的选择可能只是使用tested-and-tried solution。

Answer 4

我写了一个jQuery插件来做这件事。我刚刚在几分钟前将其添加到Google Code中。希望它适合你！

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

如何创建灵活的图像框架？

4 个答案: