5

私はこのコードを持っています

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<style>
html,body {
    width: 100%;
    margin: 0;
    padding: 0;
}

#main {
    margin: 0 auto;
    width: 963px;
    height: 642px;
}
#preload {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}
.loading {
    position:absolute;
    top: 43%;
    left: 47%;
    z-index: 2;
    display: none;
}
</style>
</head>

<body>
    <div id="main">
        <img id="preload" src="preload.png"/>
        <img class="loading" src="../effects/loading icon/loading3.gif" />
    </div>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../player/player.js"></script>
    <script type="text/javascript" src="pic1.js"></script>
    <script>
    $(document).ready(function() {
        $(window).on('resize', function(){
            var maxWidth = $(window).width();
            var maxHeight = $(window).height();
            var ratio = $("#main").height() / $("#main").width();

            if(maxWidth * ratio > maxHeight) {
                $("#main").height(maxHeight);
                $("#main").width(maxHeight / ratio);
            } else {
                $("#main").width(maxWidth);
                $("#main").height(maxWidth * ratio);
            }
            $("#preload").width($("#main").width());
            $("#preload").height($("#main").height());
        }).trigger('resize');
    })(jQuery);
    </script>
</body>
</html>

私が欲しいのは、内部のdivとimgがウィンドウのサイズ変更で自動サイズ変更されることです。問題は、最初のページの読み込み時に、図 1 のように div の下に空白のスペースがあり、ウィンドウのサイズを変更すると、図 2 のようにスペースが消えることです。それ、そんなに:) 写真1

写真2

Jsfiddle の更新: http://jsfiddle.net/7bNjf/

4

5 に答える 5

5

image.onload がサイズ変更関数を最初に呼び出すように、コードをリファクタリングします。

<img id="preload" src="preload.png" onload="resizeImage()" />

スクリプト セクション:

function resizeImage() {
    //calculations here...
}

window.addEventListener('resize', resizeImage, false);

(変更する必要がある主要な部分が..必要に応じて変更するイラストにバニラ JS を使用します)。

これはもちろん (?)resizeImage()ウィンドウの onload/onread イベントでも呼び出されることを意味します。

于 2013-05-21T02:41:01.927 に答える
1

答えのように見えるので、ここに入れます：

DOM の準備ができたら、画像はまだロードされています :) ロジックを関数に入れ、window .resize と .load 内でその関数を再利用します。

jQuery(function( $ ) {


     function resizzler(){
        var $main = $('#main');
        var maxWidth = $(window).width();
        var maxHeight = $(window).height();
        var ratio = $main.height() / $main.width();

        if(maxWidth * ratio > maxHeight) {
            $main.height(maxHeight).width(maxHeight / ratio);
        } else {
            $main.width(maxWidth).height(maxWidth * ratio);
        }
        $("#preload").width($main.width()).height($main.height());
    }

    $(window).on('resize load', resizzler );

});
于 2013-05-21T02:39:13.640 に答える
0

画像のサイズを変更すると、縦横比が維持されます。計算された画像の高さがウィンドウの高さよりも小さい場合、使用したスタイリング (位置: 絶対; 上: 0; 左: 0) を指定すると、画像はそれを囲む div の左上隅に対して「ドッキング」されます。

囲んでいる div を常に塗りつぶす唯一の方法は、クリップするか、ストレッチしてアスペクト比を失うことです。

もう 1 つの方法は、画像を垂直方向に中央揃えにすることです。

于 2013-05-21T02:57:05.513 に答える
0

「サイズ変更」でのみバインドし、「ロード」でバインドしてみてください

$(window).on('load resize', function()....
于 2016-02-03T17:39:07.660 に答える
0

画像は div 名の中に#mainあり、CSS で #main div の高さ幅を指定します。

#mainしたがって、画像の高さはdivの高さよりも小さいと思います。ウィンドウのサイズを変更した後、#mainjQuery を使用して div の高さを変更します。画像と#maindiv の同じ高さが初回読み込み時の問題を解決すると思います

于 2013-05-21T03:23:40.803 に答える