在之前和之后自动调整图像大小标签
我正在与一位网站设计师合作。她有一个关于装饰网站上的 h1 标题的好主意，但我很难找到实现此目的的方法。
她的计划是通过将每个 H1 标题夹在两个视觉元素之间来居中，这两个视觉元素会调整大小以占用可用空间。将每个视觉元素视为一个双端箭头，中间有一个装饰，一条直线将它们连接起来。
您现在可以通过 CSS :before 和 :after 标签在实时网站上插入静态图像来看到这一点（并理解她为什么讨厌这个）。图像是用线条连接的花朵，中间有环。
http://getwellgabby.org/thanks/
我认为这是 jQuery 的工作，但我不知道从哪里开始。任何为我指明正确方向的帮助将不胜感激。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web
技术交流群。
我正在与一位网站设计师合作。她有一个关于装饰网站上的 h1 标题的好主意，但我很难找到实现此目的的方法。
她的计划是通过将每个 H1 标题夹在两个视觉元素之间来居中，这两个视觉元素会调整大小以占用可用空间。将每个视觉元素视为一个双端箭头，中间有一个装饰，一条直线将它们连接起来。
您现在可以通过 CSS :before 和 :after 标签在实时网站上插入静态图像来看到这一点（并理解她为什么讨厌这个）。图像是用线条连接的花朵，中间有环。
http://getwellgabby.org/thanks/
我认为这是 jQuery 的工作，但我不知道从哪里开始。任何为我指明正确方向的帮助将不胜感激。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
+1 有趣的问题。
如果没有完全解决这个问题，您似乎可以使用滑动门逻辑根据需要扩展和缩小图像。
http://www.alistapart.com/articles/slidingdoors2/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
您将使用 jQuery 的地方是动态调整宽度。因此，找到
h2的宽度，从包含的div的宽度中减去该宽度，然后将结果一分为二，这就是每个侧面图像的宽度。+1 Interesting question.
Without working it out completely, it looks like you could use the Sliding Doors logic to extend and shrink the images as necessary.
http://www.alistapart.com/articles/slidingdoors2/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Where you would use jQuery is the dynamically adjust the widths. So find the width of the
h2, subtract that from the width of the containingdivand then divide the result in two and that is the width of each side image.那么基本上花的宽度会根据中间 H1 标签的字符长度而变化？这肯定会扭曲花朵/环的形状，从而达不到改善外观的目的。
您可以沿着该行的最大宽度分布 3 个元素（左花链、标题、右花链），即“text-align:center;”。
另一个复杂的选择是将两条花链分成 5 段。两端和中间永远不会改变，但之间的两部分是填充剩余空间的直线。最终的外观可以通过制作 1 条直线背景并在其上放置较低的 z-index 并将花蕾和环放在其顶部并将它们分布在宽度上来实现。
我希望你能理解这一点，因为没有插图就很难理解，哈哈。
So basically the width of the flower would change depending on the character length of the H1 tag in the middle? This would surely distort to shape of the flowers/loops and therefor defeat the purpose of improving the look.
You could just distribute the 3 elements (left flower chain, heading, right flower chain) along the maximum width of that row, which is simply "text-align:centre;".
the other complicated option involves breaking both flower chain's up into 5 pieces. the 2 ends and the middle never change, but the 2 sections between are the straight lines the fill remaining space. The final look could be acheived by making 1 straight line background and putting a lower z-index on it and places the buds and loops on top of it and spreading them out over the width.
I hope you understood that cuz its hard to eplxain without illustrations lol.
您可以添加图像，但问题是标题太长。由于图像的宽度是固定的，因此标题文本的大小非常有限。您可以缩小图像，但它们会变得扭曲并且看起来很难看。
如果您更改图像并使用直线而不是圆形，则您有更多选择。
您还可能拥有多组图像，并使用服务器端代码（而不是 JavaScript）在它们之间进行切换。您可以检查文本的长度，并估计其宽度。然后你可以向 h1 添加一个类，它将显示适当的图像。
尽量不要使用 JavaScript。
You can add the images, but the issue is when the title is too long. Since the images are fixed width, your heading text size is very limited. You can shrink the images, but then they will get distorted and look ugly.
If you change the image, and have a straight line instead of the circles, you have more options.
You may also have multiple sets of images, and use server side code (not JavaScript) to switch between them. You can check the length of the text, and estimate its width. Then you can add a class to the h1, which will show the appropriate images.
Try not to use JavaScript.