0

ウィンドウのサイズ変更機能がトリガーされたときに、jquery でフルスクリーン画像を作成しようとしています。しかし、この種の結果が得られます-画像の下部にギャップがあり、修正方法がわかりません。

ここに画像の説明を入力

基本的なhtml、

<!-- container -->
    <div id="container" class="container">

        <div class="holder-supersize" id="supersize">

            <ul class="background-supersize">
                <li><a href="#"><img src="styles/images/IMG_0250.jpg" alt="" width="1000" height="667" /></a></li>
                <li><a href="#"><img src="styles/images/IMG_0255.jpg" alt="" width="667" height="1000" /></a></li>
                <li class="active"><a href="#"><img src="styles/images/IMG_0323.jpg" alt="" width="1158" height="772" /></a></li>
            </ul>

        </div>

    </div>
    <!-- container -->

ウィンドウのサイズ変更時に画像サイズを更新するためのjquery、

$(document).ready(function(){

    $(window).resize(function(){

        $(".holder-supersize").each(function() {

            //Define image ratio & minimum dimensions
            var minwidth = .5*(640);
            var minheight = .5*(480);
            var ratio = 480/640;

            //Gather browser and current image size
            var imagewidth = $(this).width();
            var imageheight = $(this).height();
            var browserwidth = $(window).width();
            var browserheight = $(window).height();

            //Check for minimum dimensions
            if ((browserheight < minheight) && (browserwidth < minwidth)){
                $(this).height(minheight);
                $(this).width(minwidth);
            }
            else
            {   
                //When browser is taller    
                if (browserheight > browserwidth){
                    imageheight = browserheight;
                    $(this).height(browserheight);
                    imagewidth = browserheight/ratio;
                    $(this).width(imagewidth);

                    if (browserwidth > imagewidth){
                        imagewidth = browserwidth;
                        $(this).width(browserwidth);
                        imageheight = browserwidth * ratio;
                        $(this).height(imageheight);
                    }

                }

                //When browser is wider
                if (browserwidth >= browserheight){
                    imagewidth = browserwidth;
                    $(this).width(browserwidth);
                    imageheight = browserwidth * ratio;
                    $(this).height(imageheight);

                    if (browserheight > imageheight){
                        imageheight = browserheight;
                        $(this).height(browserheight);
                        imagewidth = browserheight/ratio;
                        $(this).width(imagewidth);
                    }
                }
            }
            return false;
        });

    });

});

スーパーサイズ画像のCSS

/* Supersize -------------------------------------------*/

.holder-supersize {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:0;
}

.background-supersize {
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
}

.background-supersize li {
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    left:0;
    top:0;
    text-align:center;
}

.background-supersize li img {
    /* for image with height < width */
    /**/
    width:100%;
    height:auto;


    /* for image with height > width */
    /*
    width:auto;
    height:100%;
    */
}

.background-supersize li ,
.background-supersize a,    
.background-supersize img{
    display:none;
    }

.background-supersize .active, 
.background-supersize .active a,
.background-supersize .active img{
    display:inline;
}

これはjsfiddleのリンクで、これは実際の製品を見るためのリンクです。

私が間違ったことをしたアイデアはありますか?どうすれば修正できますか?

4

1 に答える 1

0

あなたのコードは、高さと幅の比率をロックすることで画像が歪むのを防いでいるようです。したがって、ウィンドウの比率が同じでない限り、下部 (背の高い/狭いウィンドウの場合) または右側 (短い/幅の広いウィンドウの場合) にスペースができます。

画像を歪ませたい場合は、高さをウィンドウの高さと等しくし、幅をウィンドウの幅と等しくするだけで、コードを大幅に簡素化できます。

于 2012-09-20T21:36:36.960 に答える