保持文本区域大小调整的比例

Maintain ration on textarea resize

本文关键字：调整 文本 区域      更新时间：2024-01-08

调整浏览器窗口大小时，是否可以缩放文本区域的FONT SIZE并保持其比例？

我的要求：背景和前景上都有一个图像，我有一个文本区域，用户可以在其中添加文本。当调整bowser窗口的大小时，我需要保持文本区域的位置和比例。

如果使用jQuery，那么下面的代码将根据窗口的大小调整文本区域的大小和字体的大小。

在执行代码之前，请确保设置了文本区域的大小和字体大小（即，任何会改变这些区域大小的内容都已加载并执行）。

字体大小（包括单位）从CSS中读取，并根据窗口高度的变化进行更新；宽度被忽略。我怀疑你是否打算改变字体纵横比。

可以进行一些优化（只调整更改的尺寸；只在窗口高度更改时更改字体），但我将把这些留给您。

假设：

  • 字体的初始大小在CSS 中设置

  • 要保持其比率的textarea具有id"mytextarea"。

        function startResizeHandling(){
        var textarea = $('#mytextarea');
        var initialHeight = textarea.height(),
            widthRatio = textarea.width()/$(window).width(),
            heightRatio = initialHeight/$(window).height(),
            cssFontSize = textarea.css('font-size');
        var fontRatio = parseFloat(cssFontSize.match(/^([0-9.]+)/)[1]) / initialHeight,
            fontUnit = cssFontSize.match(/^[0-9.]+([a-z]+)$/i)[1];
        function handleWindowResize() {
            var newWidth = widthRatio * $(window).width(),
                newHeight = heightRatio * $(window).height();
            textarea.width(newWidth);
            textarea.height(newHeight);
            textarea.css('font-size', fontRatio * newHeight + fontUnit);
        }
        $(window).on('resize', handleWindowResize);
    };

编辑：

重读了这个问题后，我不清楚你是否想：

  • 缩放文本区域的字体大小，并保持文本区域的比例，或者
  • 缩放文本区域的字体大小，并保持字体的比例（即实际扭曲字体）

这个答案解决了第一个问题，而不是第二个问题。

相关文章：