ウィンドウのサイズに合わせて画像のサイズを変更

今回はウィンドウの Size に合わせて画像の Size を変更してみます。
CSS でも良いのかと思いますが別の用途で Size の変更もある場合、
こんな処理も必要かと思います。他の方に参考になればと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var objAreaDiv    = $('#disp_area');
                var objImgDiv     = $('#image_area');
                var objImage      = $('#image_area img');

                var mAreaSizeW    = 0;
                var mAreaSizeH    = 0;

                var mBaseSizeW    = 220;    // Image Width
                var mBaseSizeH    = 80;     // Image Height

                var mDispSizeW    = 0;
                var mDispSizeH    = 0;

                // ReSize
                function fnMovieReSizeSet() {

                    mAreaSizeW = objImgDiv.width();

                    if (mAreaSizeW > mBaseSizeW) {
                        mAspectRatio = (mAreaSizeW / mBaseSizeW)
                        mDispSizeW = mAreaSizeW;
                        mDispSizeH = mBaseSizeH * mAspectRatio;
                    } else {
                        mDispSizeW = mBaseSizeW;
                        mDispSizeH = mBaseSizeH;
                    }

                    objImage.width(mDispSizeW).height(mDispSizeH);

                }

                $(window).resize(function() {
                    fnMovieReSizeSet();
                });
                fnMovieReSizeSet();

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #disp_area {
                position   : relative;
            }

            #image_area {
                left       : 0;
                right      : 0;
                top        : 0;
                position   : absolute;
                overflow   : hidden;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">

            <div id="image_area">
                <img src="./icon_jpeg01.jpg">
            </div>

        </div>

    </body>
</html>

sample

sample を表示すると画像を画面幅いっぱいに表示します。
今回は画像の元サイズより小さいサイズにはしないようにしています。

画像を表示する場合はCSSで画像を背景として表示する方法もありますが、
今回はあえて Javascript での変更にて制御しています。

以外と面倒ですね・・・
正直CSSだけで制御する方が良いのかなぁ・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です