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

前々回,前回に引き続いてウィンドウサイズに合わせた画像サイズの変更です。
表示方法には色々な意見がありますね、高さのサイズは変更したくない(ページ全体のレイアウトは崩さない)場合に挑戦です。
高さは固定で画像の拡大・縮小と内部的な調整をやって見ます。
まぁ、前々回と前回の「まとめ」みたいなものですね。

<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    = 80;

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

                var mDispSizeW    = 0;
                var mDispSizeH    = 0;
                var mDispPointT   = 0;
                var mDispPointL   = 0;

                // ReSize
                function fnMovieReSizeSet() {

                    mDispPointL = 0;
                    mDispPointT = 0;
                    mAreaSizeW = objAreaDiv.width();

                    mAspectRatio = (mAreaSizeW / mBaseSizeW);
                    mDispSizeW = mAreaSizeW;
                    mDispSizeH = mBaseSizeH * mAspectRatio;

                    mDispPointT = (((mDispSizeH - mBaseSizeH) / 2) * -1);

                    if (mAreaSizeH < mDispSizeH) {
                        objImgDiv.width(mAreaSizeW).height(mAreaSizeH);
                        objImage.width(mDispSizeW).height(mDispSizeH).css({'top' : mDispPointT});
                    }

                }

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

            });

        --></script>

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

            #disp_area {
                position   : relative;
                margin-top : 50px;
            }

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

            #image_area img {
                position   : absolute;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">

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

        </div>

    </body>
</html>

sample

sampleではウィンドウの Size に合わせて画像の拡大率が変わります。
但し、画像(縦)の表示領域は変わりません。
また、画像の表示は高さに合わせて中心を表示しています。

高さを限定することでページのレイアウトが変わらずに全画面の表示が可能です。
・・・結構実用性があるのではないでしょうか、思ったよりも出来が良いです。
それに画像よりは動画向きかも知れませんね。
まぁ、色々なところで使ってみようかと思います。

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

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

コメントを残す

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