0

ここで作業しているスライドショーに移動すると、ブラウザ ウィンドウのサイズを変更すると、画像のサイズが変更され、正しく移動することがわかります。

...ブラウザウィンドウの幅を特定の量よりも小さくしない限り（その量を定義するものはわかりません）、画像を拡大縮小する代わりに引き伸ばします。どうすればこれを修正できますか?

ここに私のサイズ変更コードがあります:

winWidth = $(window).width();
winHeight = $(window).height();
ratio = winWidth/winHeight;
if(ratio > imgRatio){
    $('#curImg img').css({width:winWidth});
    imgWidth = winWidth;
    imgHeight = $('#curImg img').height();
    $("#curImg img").css({top: (-1*Math.round((imgHeight-winHeight)/2)) + "px"});
    $("#curImg").css({height: winHeight + "px"});
}else{
    $('#curImg img').css({height:winHeight});
    imgHeight = winHeight;
    imgWidth = $('#curImg img').width();
    $("#curImg img").css({left: (-1*Math.round((imgWidth-winWidth)/2)) + "px"});
    $("#curImg").css({width: winWidth + "px"});
}
4

4 に答える 4

2

この jQuery プラグインをチェックすることもできます: http://srobbin.com/jquery-plugins/backstretch/

または、複数のソリューションを検討する CSS トリック: http://css-tricks.com/perfect-full-page-background-image/

于 2012-06-26T13:52:11.130 に答える
1

background-sizeプロパティ、特にcover値を確認する必要があります

于 2012-06-26T13:46:53.757 に答える
0

私が書いたものはうまくいきます：

//oWidth - container width
//oHeight - container height
//iWidth = image width
//iHeight = image height

    iRatio = iWidth/iHeight;
    wRatio = oWidth/oHeight;

    if(iRatio<wRatio){
        imageWidth = oWidth;
        imageHeight = Math.ceil(iHeight*(oWidth/iWidth));

    }
    else{
        imageHeight = oHeight;
        imageWidth = Math.ceil(iWidth*(oHeight/iHeight));

    }

    $('#backgroundResizeImage').css({ 
        'height': imageHeight,
        'width': imageWidth
    });

お役に立てれば！

于 2012-06-26T13:56:24.577 に答える
0

自己完結型のデモを作成するために、例を少し書き直しました。

あなたの質問に関係のない2つのメモ。

  1. jQuery オブジェクトは必ずキャッシュしてください。不必要なパフォーマンス コストが発生するため、アイテムを繰り返しフェッチすることは望ましくありません。
  2. 私の例では、ウィンドウのサイズ変更イベントでこれが発生していることを示しています。どのように設定したかわかりません。本番環境では、ウィンドウのサイズ変更イベントなどにバインドされたイベントを調整することが非常に重要です。これらのイベントは、ブラウザーが処理できる速さで発生する可能性があり、悪い結果につながる可能性があるためです。ジョン・レシグによるこの優れた記事を参照してください。

関連する最大の変更点は、ウィンドウとの比率に応じて画像の高さと幅を設定する方法を変更したことです。この方法の方が少しわかりやすいと思いますが、それは主観的なものです。しかし、それはうまくいきます！

http://jsfiddle.net/L4k3s/2/

var $window = $(window),
    $img = $('img'),
    imgRatio = $img.width() / $img.height();

$window.on('resize', function (event) {
    var imgWidth = $img.width(),
        imgHeight = $img.height(),
        winWidth = $window.width(),
        winHeight = $window.height(),
        ratio = winWidth / winHeight;

    // The image is wider than the window
    if (ratio < imgRatio) {
        $img.width(winWidth);
        $img.height(winWidth / imgRatio);
        $img.css({
            left: 0,
            top: (-1 * Math.round((imgHeight - winHeight) / 2)) + "px"
        });
    // The image is taller than the window
    } else {
        $img.width(winHeight * imgRatio);
        $img.height(winHeight);
        $img.css({
            left: (-1 * Math.round((imgWidth - winWidth) / 2)) + "px",
            top: 0
        });
    }
});

</p>

于 2012-06-26T14:01:22.293 に答える