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

【问题标题】：How to Create flexible Image Frame?如何创建灵活的图像框架？
【发布时间】：2009-10-12 07:55:13
【问题描述】：

我想在 Image 之上创建 PNG Frame，它是动态出现的，因此所有 Image 的 Image Height 和 width 都不同。

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

这是我想要达到的最终结果。这可能使用 jQuery.

使用更多的图像和 div 会很好。

谢谢

【问题讨论】：

标签： jquery css image

【解决方案1】：

不久前我写了一个 jQuery 插件来做这件事。几分钟前，我刚刚将它添加到 Google 代码中。希望它对你有用！

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

【讨论】：

【解决方案2】：

是的，这是可能的。

每张图片会有 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设置左上右下的宽高

【讨论】：

imageContainer 应该是相对的 ;)

【解决方案3】：

您需要在图像周围再添加一些包装器（Ghommey 的解决方案），并且通过足够的样式，您将在 flash 中获得类似 9-slice scaling 的东西。

您也可以使用文章中描述的 CSS3 方法 - 但它仅适用于最先进的浏览器。

【讨论】：

【解决方案4】：

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

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

【讨论】：