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

并且#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 回答