1

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

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

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

替代文字

谢谢。

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

4

5 回答 5

3

如果我是你,我会确保我可以重复使用(重复)图像,然后我会这样做:

<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使用角落图像作为背景并同时设置widthheight设置。

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

检查附加的图像,我将线条放置在您应该剪切原始帧图像的位置。

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

替代文字

于 2009-11-15T17:17:20.957 回答
2

这可能很难实现。

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

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

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

于 2009-11-15T15:55:39.930 回答
0

您可以使用A List Apart 的投影技术,该技术使用 CSS 和 PNG 为图像创建可自动调整大小的投影。您可以修改技术以创建可调整大小的框架。

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

  • 图 1 - 框架的左上角以及顶部和左侧。
  • 图 2 - 框架的右上角和右侧。
  • 图 3 - 框架的左下角和底部
  • 图 4 - 框架的右下角
于 2009-11-15T15:57:52.817 回答
0

用 Javascript 缩小框架是最简单的部分,真的。一旦你设置了 HTML/CSS 以便它已经可以缩放,你可以使用 Javascript 设置宽度,如下所示:

var photo = document.getElementById('photoFrame');
photo.width = '200px';
于 2009-11-15T16:02:03.550 回答
0

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

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

于 2009-11-16T05:27:56.223 回答