今更ながら、ちょっとしたjQueryのプラグインを作りました。タイトルの通り、ウィンドウサイズに応じて要素のサイズを自動調整するプラグインです。

本当はCSSでやらないといけない内容なんですが、どうしてもスクリプトでやる必要があったので作りました。

仕様

基準となるウィンドウ幅に対する要素の幅を決めておき、そこからの差分を実際の幅に反映させます。例えば基準となるウィンドウ幅が1280で、要素の幅が60だったとき、

• ウィンドウwidth=1280 => 要素width=60
• ウィンドウwidth=1281 => 要素width=61
• ウィンドウwidth=1282 => 要素width=62
• ウィンドウwidth=1279 => 要素width=59
• ウィンドウwidth=1278 => 要素width=58

・・・という感じにサイズを自動調整します。

実装

※現状width（幅）の自動調整しか実装してませんが、height（高さ）にも簡単に対応できると思います。

📄jquery.autoAdjust.js

/**
 * 基準サイズを基に、ウィンドウリサイズに応じてサイズを自動調整する
 * ※widthのみ height未対応
 *
 * ex)
 * <input type="text" class="jq-auto-adjust" data-base-width="60" data-base-window-width="1280">
 * $('.jq-auto-adjust').autoAdjust(); // ウィンドウサイズ1280のときにinputの幅が60px、リサイズと共に自動伸縮
 */
(function($) {
    'use strict';

    var methods = {
        init: function(options) {
            var settings = $.extend({
                baseWidth: 'current', // number(px) or 'current'
                baseWindowWidth: 'current', // number(px) or 'current'
            }, options);

            return this.each(function() {
                var $this = $(this);
                var autoAdjust = new AutoAdjust($this, mergeOptions($this, settings));
                autoAdjust.observe();
                $this.data('plugin_auto_adjust', autoAdjust);
            });
        },

        off: function() {
            return this.each(function() {
                var autoAdjust = $(this).data('plugin_auto_adjust');
                autoAdjust.stopObserving();
            });
        },
    };

    var mergeOptions = function($el, settings) {
        return $.extend({}, settings, $el.data());
    };

    $.fn.autoAdjust = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.autoAdjust');
        }
    };

    /**
     * クラス
     */
    var AutoAdjust = (function() {

        var NAMESPACE = '.auto_adjust';

        var AutoAdjust = function($el, settings) {
            this.$el = $el;
            this.$window = $(window);

            this.baseWidth = settings.baseWidth === 'current' ? this.$el.width() : settings.baseWidth;
            this.baseWindowWidth = settings.baseWindowWidth === 'current' ? this.$window.width() : settings.baseWindowWidth;
        };

        /*
         * インスタンスメソッド
         */
        $.extend(AutoAdjust.prototype, {

            observe: function() {
                this.$window.on('resize' + NAMESPACE, this._bind('onResize'));
                this.adjust();
            },

            stopObserving: function() {
                this.$window.off(NAMESPACE);
            },

            onResize: function(e) {
                this.adjust();
            },

            adjust: function() {
                var diff = this.$window.width() - this.baseWindowWidth;
                var width = this.baseWidth + diff;
                if (width < 1) width = 1;
                this.$el.width(width);
            },

            _bind: function(funcName) {
                var that = this;
                return function() { that[funcName].apply(that, arguments) };
            },
        });

        return AutoAdjust;
    })();
})(jQuery);

上記プラグインを読み込んだら、次のような感じで使用することができます。

📄test.html

<input type="text" class="jq-auto-adjust" data-base-width="60" data-base-window-width="1280">

📄test.js

$('.jq-auto-adjust').autoAdjust(); // ウィンドウサイズ1280のときにinputの幅が60px、リサイズと共に自動伸縮

どうしてもJavascriptでリサイズしないといけない場合なんかにご利用ください。

関連する記事

• クラスを使用したjQueryプラグインのテンプレート
• 要素が表示されたら関数を実行する jquery.showuptrigger
• jquery-ui.sortableでドラッグ中の要素の位置がおかしくなる
• 【tubetop】YouTubeの国別人気動画を自動集約するサイトを作ってみた
• [Vue.js] 俺的ベストプラクティス＋バッドプラクティス