生成图片框架

Question

我创建了图库，我想在图片周围创建框架。

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

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

感谢。

PS：首先，我必须有可能通过JavaScript缩小框架。

Answer 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的宽度以增加框架的大小。

Answer 2

这可能非常棘手。

如果您使用的是支持CANVAS的现代浏览器，请查看符合您要求的演示：CANVAS Demo

否则你需要创建8个图像（4个角和4个边），这些图像的边是这样做的，它们可以平铺，以适应你需要的任何尺寸。

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

Answer 3

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

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

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

Answer 4

使用Javascript缩小框架是最容易的部分，真的。 设置完HTML / CSS以便它已经扩展后，您可以使用Javascript设置宽度，如下所示：

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

Answer 5

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

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