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

Question

我想在Image的顶部创建PNG Frame，它动态变化，因此Image Height和所有Image的宽度都不同。

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的解决方案），并且有足够的样式，你会得到像闪存中的9切片缩放 。

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

Answer 3

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

您最好的选择可能就是使用经过测试并尝试过的解决方案 。

Answer 4

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

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