0

同じ質問のスレッドが1000個ほどあることを私は知っています。全部読んだと言ったら嘘になりますが、確かにたくさん読んでいます。

私の現在の問題はこれです：私は現在、ブラウザのサイズに応じてサイズを変更するdivを持っており、下部に「メニュー」のあるフッターがあります。ここで、div内にフェードインおよびフェードアウトするいくつかの「背景」画像を配置しました（引用符を使用するのは、jqueryトランジションを使用できず、css3トランジションがcssプロパティの背景画像として設定されていないためです。 IEではサポートされていません）。私は使用しました$(window).resizeこれを達成するために（そしてそのようにして、メニューが表示されないポイントまでdivをオーバーストレッチする画像の問題も解決しました）。これまでのところ、画像がブラウザの幅/高さの比率に正しく適合していない場合に問題が発生します。もちろん、これを解決するために、画面のピクセルに応じて最大幅、高さなどを動的に使用してみましたが、ある程度は機能しました。一部の画像のアスペクト比が「間違っている」ため、サイズを変更すると画面の端に空白が残るため、ある程度言います（一部は高さ、一部は幅）。1つの画像だけの場合は、手動でその画像を切り取ってフィットさせます。問題は私がそれらをたくさん持っているということです。

この問題を解決するための私の考えは次のとおりです。ブラウザの幅またはブラウザの高さにサイズ変更すると、各画像は空白のままになります。画像のサイズを空白のままにしないサイズに変更し、画面の高さ/幅を超える画像の他の部分を切り抜く（または切り取る）ようにします。

これを達成する方法がわかりません。jqueryで画像のトリミングを検索したところ、自分が望んでいたものではないものが見つかりました。写真の一部を選択するのは簡単です...わかりません。

何か案は？質問に答えたり、コードの詳細を教えたりすることができます。

どうもありがとう！

画像を変更する私の機能：

$(function() {
        $imgs = $('.bgChange'),
        imgAmount = $imgs.length;

    $($imgs.css('position', 'absolute').hide().get(0)).show();

    window.setInterval(swapImages, tiempo);

    function swapImages() {
        var $currentImg = $($imgs[current]);
        if(current == imgAmount-1) current = -1;
        var $nextImg = $($imgs[++current]),
            speed = 1500;
        $currentImg.fadeOut(speed,function(){$nextImg.fadeIn(speed);});

    }
});

私の.bgChangeクラス

.bgChange
{
margin:0;
border:0;
padding:0;
z-index:-1;
position:absolute;
}

画像付きの私のdiv（私が理解していないいくつかのcssプロパティを使用して画面のサイズに収まり、別のファイルにあります。誰かがそれを必要とする場合は、それらを貼り付けることができます）：

<div id="DummyFondo">
        <img class='bgChange' src="img/bg03.jpg" alt="" />
        <img class='bgChange' src="img/foto_2.jpg" alt="" />
        <img class='bgChange' src="img/Semillas2.jpg" alt="" />
         ....goes on
</div>

私のサイズ変更機能：

$(window).resize(function()
{
    ResizeImages();
});

resizeImagesメソッドが機能しない、それは私が変更したいものです..私は次のようなことを試しました

function ResizeImages()
{

    $imgs = $('.bgChange'),
    imgAmount = $imgs.length;
    for(a = 0; a < imgAmount; a = a + 1)
    {
        var $currentImg = $($imgs[a]);
        $currentImg.css("max-width", $(window).width() + "px" + " !important;");
        $currentImg.css("max-height", $(window).height() + "px" + " !important;");
    }

}

そして、それらを高さ、幅、最小幅などに変更します。ここに、「トリミング」ロジックを配置します。どちらの側をトリミングするか（およびトリミング自体）を決定する計算です。

4

2 に答える 2

1

最初に、これから説明する内容の小さなデモを示します。これは、指定に従ってウィンドウに収まるように画像のサイズを変更しますdiv(または他のコンテナ要素に収まるように簡単に変更できます):少しデモ。

ここでの私の考えは、常にサイズ (高さ/幅) が大きい場合はサイズを変更し、小さい方のサイズで余分な量を「トリミング」するには、ポジショニングを適切な負の値に「引っ張る」ことです。そのデモでサイズ変更を行うコードは次のとおりです。

function resizeImg() {
    var curimg = $('.bgChange');
    var ww = $(document).innerWidth(), hh = $(document).innerHeight();
    if(hh > ww) {
        curimg.height(hh);
        var lft = - Math.floor((curimg.width() - ww) / 2);
        curimg.css({"top":"0px", "left":lft});
    }
    else if(ww > hh) {
        curimg.width(ww);
        var tp = - Math.floor((curimg.height() - hh) / 2);
        curimg.css({"left":"0px", "top":tp});
    }
}

何らかの形でお役に立てば幸いです！コードがあいまいな場合は、喜んで説明します。

于 2012-08-17T14:22:05.613 に答える
0

どのブラウザをサポートする必要がありますか? CSS3 はこれをソートできます:

.backgroundDiv {
    background-size: cover;
}

jQuery を使用すると、古いブラウザーでこれを機能させることができます: http://louisremi.github.com/jquery.backgroundSize.js/demo/

于 2012-08-17T13:22:03.240 に答える