为图片生成框架答案

【问题标题】：Generate frame for picture为图片生成框架
【发布时间】：2009-11-15 15:48:00
【问题描述】：

我创建画廊，我想在图片周围创建框架。

但是这张图片必须是可缩放的。此帧的宽度和高度由图像的宽度和高度生成。

并且必须有可能通过 JavaScript 改变框架的高度。

谢谢。

PS：首先，我必须有可能通过JavaScript使框架变窄。

【问题讨论】：

图片不错，能给个链接吗？

标签： javascript html css frame image

【解决方案1】：

如果我是你，我会确保我可以重复使用（重复）图像，然后我会这样做：

<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-left, #top-right, #bottom-left, #bottom-right 使用角图像作为背景，并同时设置了 width 和 height。

而#top, #right, #bottom, #left 正在使用重复的图像作为他们的背景。

检查附加的图像，我在你应该剪切原始帧图像的地方放置线条。

此方法将允许您更改#top / #bottom 和#left / #right 的宽度以增加框架的大小。

【讨论】：

感谢您的回答。但我还是不明白，例如，如何在#top 中将图像大小调整为高度？

【解决方案2】：

这可能很难实现。

如果您使用支持 CANVAS 的现代浏览器，请查看此演示，它可以满足您的需求：CANVAS Demo

否则，您将需要创建 8 个图像（4 个角和 4 个边），其中边的制作方式可以平铺以调整到您需要的任何大小。

下一个技巧是如何构建框架。您可以在图片周围手动创建 DIV/表格来创建这种效果，但这会非常笨重而且不是很干净。您最好的选择是使用 jQuery（或您最喜欢的库）使用 CSS 类（例如“fancyFrame”）挂钩页面上的所有图像，并根据需要使用 HTML 标记包装它们，该标记利用您在上面创建的图像通过 CSS。

【讨论】：

我之前使用Mozilla网站上的画布教程来制作相框效果。它工作得很好。只是没有跨浏览器支持。
如果我选择 Canvas，支持哪些浏览器会丢失？ IE？ code.google.com/p/explorercanvas。还有什么？
@Oduvan - 正确，IE 不支持 Canvas（尚）因此它不会在那里工作。 - 但是，正如您所指出的，excanvas (explorercanvas) 在弥补 IE 缺乏支持方面做得非常好。我没有在 IE 中使用 excanvas 尝试过框架示例，但是（手指交叉）希望它可以工作。 @rochal 的回答几乎就是我对另一个选项的建议。当我得到一秒钟，我会发布一些 jQuery 来做到这一点。注意：MSFT 在 IE 博客文章中暗示涉足实际的 Canvas 支持（可能在 IE9 中）：blogs.msdn.com/ie/archive/2009/11/02/…

【解决方案3】：

用 Javascript 缩小框架是最简单的部分，真的。一旦你设置了 HTML/CSS 以便它已经可以缩放，你可以像这样使用 Javascript 设置宽度：

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

【讨论】：

是的，我现在这个。但正在寻找复杂的解决方案

【解决方案4】：

您可以使用A List Apart's Drop Shadow technique，它使用 CSS 和 PNG 为图像创建可自动调整大小的阴影。您可以修改技术以创建可调整大小的框架。

您需要四个 div 和四个图像。角落需要切割成 45 度角并具有透明度：

图片 1 - 框架的左上角以及顶部和左侧。
图片 2 - 框架的右上角和右侧。
图片 3 - 左下角和框架底部
图片 4 - 框架的右下角

【讨论】：

如果我将使用背景：url(shadowAlpha.png) - 那么不能使框架比例变窄。
如果你剪辑溢出，你可以。然后角落将覆盖边缘，整个框架将自动调整大小以适合图像。

【解决方案5】：

有趣的是，当我在 ImageKind.com 工作时，我不得不做这件事。作为参考，如果您去那里的框架店，例如this one，请转到第 4 步（添加垫子）并单击调整宽度，有一个滑块或多或少地执行您所描述的操作。

我最初有几个嵌套的 DIV，它们带有大的相对 L 形框架块作为背景图像。一个小小的 Firebug 检查表明他们已经把它改成了一张桌子。我敢肯定，效率更高，因为侧面可以平铺。

【讨论】：