13

Webページの本文に背景画像があります。background-size:cover画像のアスペクト比を維持しながら、画像が体全体に広がるように使用しました。IE7+IE8でも同じようにしたいと思います。

私は周りを見回して、次のコードを見ました：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='AutumnWinter_4.jpg',
    sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='AutumnWinter_4.jpg',
    sizingMethod='scale')";

しかし、これはアスペクト比を維持しません。これは、私たちが目指しているWebサイトにとって本当に悪いことです。

これを行う方法はありますか？jQueryをヒットせずに？

4

9 に答える 9

12

jQueryを使わない理由は何ですか? 条件付きコメントでのみ読み込むことができるIE<8ため、他のすべての最新ブラウザーでは jQuery は読み込まれません。

また、IE7 の市場シェアは非常に低い (2.52%、2012 年 4 月)ため、この機能がサイト/アプリケーションにとって非常に重要である場合、その特定のブラウザーに 25kb の余分な読み込みを許容できる可能性があることを考慮してください。

だから、私はjQuery用のこのプラグインを見つけました: https://github.com/louisremi/jquery.backgroundSize.js

IE6-7-8 に "cover" と "contain" のサポートを追加する jQuery cssHook (1.5K)

詳細については、 Github プロジェクト ページを参照してください。

于 2012-04-16T13:53:10.150 に答える
4

backgroundSize.js は IE7 で背景画像を実際に引き伸ばすことはありません。元のサイズの中央に配置するだけのようです。彼らのデモを見て、 「IE6-7-8 ユーザーが通常見るものを確認してください」をクリックしてください。

@danRhul

backstretchが IE7+ で動作することを読み ました

幸運を！

于 2012-04-17T15:24:59.663 に答える
3

実際の画像で背景画像を偽造することができます。これはもう少し HTML 編集であり、確かに理想的ではありませんが、いつから IE の処理が理想的になったのでしょうか?

<body>
  <img id="mainBG" src="mainBG.jpg" />
  <div id="content">
  [ ... ]

次に、それに応じてスタイルを設定します

body{
  position:relative;
}
#mainBG{
  width:100%
  position:absolute;
  top:0px;
  left:0px;
}

私が間違っていなければ、クロスブラウザでなければなりません。

于 2012-04-20T04:00:33.400 に答える
2

私は次のものを使用しました ( http://css-tricks.com/perfect-full-page-background-image/ )。これは ie7 でうまく機能します。

HTML:

<body>
    <img class="bg" src="filename">       
</body>

CSS: 

.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}
于 2012-04-16T23:58:31.153 に答える
1

多くの試行錯誤の末、最良の解決策はそれを推測することでした!

以下は私のために働いた。

body {
background-size:100%;
}
于 2013-09-19T00:17:38.073 に答える
1

これは今では古い質問であることは知っていますが、私と同じように、Googleでこの質問を見つけた他の人のために、私が思いついた解決策を共有したいと思いました.

サイトの背景をカバーする画像を取得しようとしていて、この質問に出くわしましたが、解決策はどれもうまくいきませんでした. 代わりにこれを思いつきました：

HTML : 背景画像を に移動し<img />、 の最初のものにします<body>。

<html>
    <body>
        <img class="background" src="kitty.jpg" />
        <div class="content">
            ...

CSS : コンテンツの下に背景を表示し、min-width/height100% に設定します。

html {
    height: 100%
}

body .background {
    position: absolute;
    z-index: -1;
    min-height: 100%;
    min-width: 100%;
}

魔法をかけるのはmin-heightとここです。min-widthHTML または CSS で画像の幅と高さを指定しないでください。アスペクト比が変更されます。

上記はIE7およびIE8で機能します。IE6をサポートしたい場合は、次のように中央の画像フォールバックを設定できます。

CSS : IE6の場合、画像を表示せず、代わりに背景画像を使用します。

body {
    _background: url("kitty.jpg") 50% top no-repeat;
}

body .background {
    _display: none;
}

(注: IE6をターゲットとするアンダースコア ハックが気に入らない場合は、代わりに条件を使用できます。これがHTML5 ボイラープレートの機能です。)

于 2012-11-28T10:26:50.237 に答える
-1

Modernizer のような「シム」または「ポリフィル」が必要なようです: http://modernizr.com/docs/#html5inie

于 2012-04-13T14:51:05.660 に答える