0

ここのこのWebサイト が、ウィンドウサイズをonloadで塗りつぶし、ウィンドウのサイズを変更しながら、ウィンドウを元の比率で塗りつぶすレスポンシブヘッダー画像をどのように作成したかを理解しようとしています。

これは私がこれまでに思いついたものですが、非常にグリッチです...

働くフィドル

$(window).load(function() {
    $('#intro-background').height( $(window).height() );
    $('#intro-background img').height( $(window).height() );
    var imageRatio = (1900 / 1270); //Original image size

    $(window).resize(function() {
      $('#intro-background').height( $(window).height() );
      var windowRatio = $(window).width() / $(window).height();

      if(windowRatio != imageRatio) {

        if($('#intro-background img').width() < $(window).width()) {
            $('#intro-background img').width($(window).width());
            $('#intro-background img').height($(window).width() / imageRatio);
        } else if( $('#intro-background img').height() > $(window).height() ) {
            $('#intro-background img').height($(window).height());
            $('#intro-background img').width($(window).height() * imageRatio);  
        }

        if($('#intro-background img').height() < $(window).height()) {
          $('#intro-background img').height($(window).height());
          $('#intro-background img').width($(window).height() * imageRatio);
        }

      }
   });
});
4

3 に答える 3

0

私は今、かなりうまく機能するこれを持っています

フィドル

function imageResize() {
var imageRatio = (1900 / 1270); //Original image size
if( $('#intro-background img').height() != $(window).height() ) {   
    $('#intro-background img').height( $(window).height() ).width( $(window).height() * imageRatio );
    if( $('#intro-background img').width() < $(window).width() ) {
        $('#intro-background img').width( $(window).width() ).height( $(window).width() / imageRatio );
    }
}}
imageResize(); // Called onLoad
$(window).resize(function() {
    imageResize();
});

これをより良い方法で行うための提案はありますか? また、画像をサイズ変更コンテナーの中央に配置したいと思います。

于 2015-12-17T19:20:43.060 に答える
0

計算を行い、高さと幅を設定するスクリプトを毎秒実行するだけです。この場合、jQuery 内でウィンドウのサイズ変更機能を賢く使用しています。

見てください：https://api.jquery.com/resize/

フィドルでは、$(window).resize で div のサイズを変更しています。これは、CSS を使用するだけで解決できます。JavaScript を使用すると、CSS を使用するよりも遅くなることに注意してください。

このフィドルを見てください したがって、CSS では次のようになります。

*, html {
    height: 100%;
    width: 100%;
}

また、#img id から幅と高さを削除しました サイズ変更が完全に機能するようになりました

誤った比率を設定せずに画像のサイズを変更したい場合は、画面のサイズ変更で実際の画像を使用してサイズを変更するこのフィドルを見ることができます。

あなたがしなければならないのは、次のことだけです。

$(window).resize(function() {
    var height = ($('#intro-background').width() / 4);    
    $('#img').css('height', height);
});

実際の画像で 100% の高さを維持したい場合は、画像を処理するように CSS を設定することもできます。そのためにこのフィドルを見てください。

ここでも、CSS で *, html を設定し、もちろん background-size: cover; を使用する必要があります。

ここを参照してください：

*, html {
    height: 100%;
    width: 100%;
}

#img {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color:red;
    margin: auto;
}
于 2015-12-17T11:05:42.423 に答える