2

アスペクト比を維持しながら、スクリプトを使用して拡大縮小し、画像を背景に塗りつぶしています。また、サムネイルを使用してその背景画像を交換しています。新しい画像の縦横比が元の画像と一致しない場合、歪みが発生します。明らかに、元の画像の古いサイズのデータ​​をまだ使用しています。どうすればこれを修正できますか?

編集：これがフィドルです。実際に動作しているのを見ることができます。これは、サムネイルの代わりにリンクを使用します (左上隅)

コードのサイズ変更（私のものではありません）：

$(window).load(function() {    

        var theWindow        = $(window),
        bgImg              = $("#bg");

        function resizeImg() {
        var imgwidth = bgImg.width();
        var imgheight = bgImg.height();
        var winwidth = $(window).width();
        var winheight = $(window).height();
        var widthratio = winwidth / imgwidth;
        var heightratio = winheight / imgheight;
        var widthdiff = heightratio * imgwidth;
        var heightdiff = widthratio * imgheight;
        var topPos = -(heightdiff-winheight) /2;
        var leftPos = -(widthdiff-winwidth) /2;
        if(heightdiff>winheight) {
            bgImg.css({
                width: winwidth+'px',
                height: heightdiff+'px',
                left:"0px",
                top:topPos+"px"
            });
        }
        else {
            bgImg.css({
                width: widthdiff+'px',
                height: winheight+'px',
                left:leftPos+"px",
                top:"0px"
            });     
        }
        $(".marker").html(bgImg.width()+" x "+bgImg.height());
    } 

      theWindow.resize(resizeImg).trigger("resize");            
});

トリガー コード:

$(document).ready(function(){
    $(".thumbs").click(function(e){
        e.preventDefault();
        $("#bg").attr("src", $(this).attr("href"));
        });
    });
4

2 に答える 2

0

あなたの目標を理解したかどうかを確認できます: JSFiddle。純粋な CSS が役立つ場合があります。

<style>
#backgroundDiv
{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    z-index:-1;
    background-image: url("http://i.imgur.com/9bIasTp.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}
</style>

<div id="backgroundDiv"></div>
于 2013-10-03T21:56:03.167 に答える
0

スクリプトで 2 つのことを変更する必要があります。

     if(bgImg.width()>bgImg.height()){
        bgImg.css({
            width: 'auto',
            height: $(window).height()+'px',
            left:"0px",
            top:topPos+"px"
        });
    }
    else {
        bgImg.css({
            width: $(window).width()+'px',
            height: 'auto',
            left:leftPos+"px",
            top:"0px"
        });     
    }

主なアイデアは、1 つの寸法を厳密に (例: 100px) に設定し、別の寸法を に設定autoすることです。その後、ブラウザのエンジンが画像の縦横比を処理します。歪みは発生しません。

スクリプトで変更する必要がある 2 番目のこと: call resizeImg()、 in<img>の onload

于 2013-10-03T21:37:31.323 に答える