在<h1>标记</h1>之前和之后自动调整图像大小

Question

我正在网站上与设计师合作。她有一个很好的想法来装饰网站上的h1标题，但我找不到实现这个的方法。

她的计划是将每个H1标题放在两个视觉元素之间，将其调整大小以占用可用空间。将每个视觉元素视为一个双头箭头，中间有一个装饰，一条直线连接它们。

现在可以看到这一点，通过CSS插入静态图像：在实时网站上的标签之前和之后（并理解为什么她讨厌这个）。图像是与线相连的花，中间是环。

http://getwellgabby.org/thanks/

我认为这是jQuery的工作，但我不知道从哪里开始这个。任何帮助我指向正确方向的人都将不胜感激。

Answer 1

+1有趣的问题。

如果不完全解决，看起来您可以使用滑动门逻辑来根据需要扩展和缩小图像。

http://www.alistapart.com/articles/slidingdoors2/

http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/

使用jQuery的地方是动态调整宽度。因此，找到h2的宽度，从包含div的宽度中减去该宽度，然后将结果除以两个，即每个边图像的宽度。

Answer 2

所以基本上花的宽度会根据中间H1标签的字符长度而改变？这肯定会扭曲花朵/环的形状，因此无法改善外观。

你可以沿着该行的最大宽度分配3个元素（左花链，标题，右花链），这只是＆＃34; text-align：center;＆＃34;。

另一个复杂的选择是将花链分成5个部分。 2个末端和中间永远不会改变，但两个部分之间是直线填充剩余空间。最终的外观可以通过制作一条直线背景并在其上放置较低的z-index并将芽和环放在其上并将它们在宽度上展开来实现。

我希望你能理解，如果没有插图的话，很难去eplx。

Answer 3

您可以添加图片，但问题是标题太长时。由于图像是固定宽度，因此标题文本大小非常有限。你可以缩小图像，但随后它们会变形并看起来很难看。

如果更改图像，并且有一条直线而不是圆圈，则可以选择更多选项。

您可能还有多组图像，并使用服务器端代码（不是J​​avaScript）在它们之间切换。您可以检查文本的长度，并估计其宽度。然后你可以在h1中添加一个类，它将显示相应的图像。

尽量不要使用JavaScript。