1

画面（これも任意の幅/高さ）のときに、（任意の幅/高さの）画像を全画面で表示しようとしています。HTML / CSS/JSを使用しています。画像を常に全画面表示にしたい。画像のアスペクト比が画面よりも低い場合は、上下をクリップする必要があります。画像のアスペクト比が画面よりも高い場合は、左右をクリップする必要があります。端が黒く見えたくない。background-image（およびbackground-positionなど）を使用してそれを行うことができますが、問題があります（更新すると画像が点滅します）。なので、タグを使いたいのですが。誰かが私がそれをする方法を知っていますか？

4

3 に答える 3

0

jQueryを使用している場合は、次を参照してください：http: //vegas.jaysalvat.com/

以上軽量： http ：//srobbin.com/jquery-plugins/backstretch/

于 2012-12-09T23:12:09.190 に答える
0

質問は素晴らしく明確だと思います。明らかにOPにはコードがありません...それが彼が質問をしている理由です。

私は前にその正確な問題に遭遇しました。画像を背景に配置できない限り、余分な部分がクリップされた状態で画像を含む要素よりも大きくしたい場合は、HTML/CSSを使用してそれを行う方法はないと思います。あなたが述べるようにタグを使用する必要がある場合、良い解決策はこれを強制的に行うことです。これが私がしたことです。

function setImagePosition() {
    var img = q(".viewCamera #viewport img");
    if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) {
        img.style.width = format("{0}px", outerWidth);
        img.style.height = "";
        img.style.top = format("{0}px", (outerHeight - img.clientHeight) / 2);
        img.style.left = "0px";
    } else {
        img.style.width = "";
        img.style.height = format("{0}px", outerHeight);
        img.style.top = "0px";
        img.style.left = format("{0}px", (outerWidth - img.clientWidth) / 2);
    }
}

説明させてください...

結果はウィンドウのouterWidth/outerHeightアスペクト比になります。画像のimg.naturalWidth/img.naturalHeightアスペクト比です。最初の方が大きい場合は、画像の幅をウィンドウの幅に設定し、top画像を垂直方向に中央揃えする値を計算する必要があります。秒が大きい場合は、画像の高さを設定してから、を使用しleftて画像を水平方向に中央揃えにする必要があります。

お役に立てば幸いです。Windows 8 HTML / JS関連のヘルプは、私のcodeSHOWプロジェクト（codeshow.codeplex.com）およびWindowsストア（aka.ms/codeshowapp）にあります。

于 2012-12-12T16:18:09.647 に答える
-1

引き伸ばす場合はbackground-sizeを使用し、タグにする必要がある場合はmax-width：100％を使用します。中央で使用するためにdisplay：block; およびmargin：0 auto;

私はあなたが何をしたのかよくわかりませんが...

画像を更新して点滅させるにはどうすればよいですか？いつ発生しますか？background-position：centerの仕事のように聞こえます。

于 2012-12-09T22:10:35.073 に答える