问题描述
所以我一直在寻找很长一段时间，虽然我发现了一些类似的解决方案，但实际上并非我的目的。
这是我的问题：我试图使有限数量的字体适合div，并相应地移动div中的图像。 基本上，我正在尝试复制以下内容：
如果您选择Nummernschild并选择Deutschland并填写方框并选择其他两个选项，您将看到我的意思。
现在我可以将div中的文本和div中的图像一起使用，只需使用on change函数即可找到。
我的问题是调整字体大小并相应地在div中移动图像。
任何人都可以建议如何解决这个问题？ 我完全迷失在这里。
谢谢
编辑：请找到我想要实现的图像。 基本上，它是一个div，当我输入3个文本框时，我可以在div中显示文本。 但是，我正在努力调整文本的大小，以便它们适当地适应并且不会影响中间的小图片。
1楼
guest271314
0
2019-02-25 05:42:28
如果<input> .value .length大于N ，则可以在CSS和keyup事件中使用transition来调整font-size ，例如，设置为5 ， maxlength设置为8
<!DOCTYPE html> <html> <head> <style> input { width:320px; height:60px; font-family: sans; font-size:48px; text-align: center; transition: font-size 1s ease-in; } </style> <script> function setFontSize(el) { el.style.fontSize = el.value.length > 5 ? "38px" : "48px"; } </script> </head> <body> <input maxlength="8" pattern="[AZ]+" placeholder="ABCDEFGH" oninvalid="this.value=''" oninput="this.checkValidity()" onkeyup="setFontSize(this)"> </body> </html>