web-dev-qa-db-ja.com

Internet Explorer 7のcss背景サイズカバー

IE7がbackground-size coverをサポートしていないことを知っています。

私はいくつかの解決策をウェブで検索しましたが、私が得た唯一のことは、imgにwidth: 100%とheight:100%を付けて背景として配置することです。

これが唯一の解決策ですか？ -ms-filterでいくつかの解決策を見たことがありますが、うまくいきませんでした。誰かが別の解決策を持っていますか？

1つの特別なこと：このbackground-sizeカバープロパティを持つdivが複数あります。

Firefoxではすべてが機能します（驚くべきことです）。

Edit1：私のコードは次のようになります：

<div class="section" id="section1">here should be the first picture as the background!!</div>
<div class="section" id="section2">here should be the second picture as the background!!</div>
<div class="section" id="section3">here should be the third picture as the background!!</div>
internet-explorerinternet-explorer-7css
16
eav

Modernizr を使用すると、ユーザーのブラウザで何ができるかを知ることができます。

ヘッダーにリンクしてModernizrをインストールする

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

そしてHTMLタグで、

<html class="no-js">

CSSを使用すると、ブラウザーがサポートするページをスタイル設定できます- ドキュメントで確認してください どの検出がサポートされているかを確認してください。この場合、background-sizeクラスが必要です

CSSファイル内-背景サイズのないブラウザー（IEのみ）

.no-background-size #image{
background-image: url(lol.png);
min-height: 100%;
min-width: 100%;
}

これを行うブラウザの場合：

.background-size #image{
background-image: url(lol.png);
background-size: cover;
}

今後、min-height: 100%などのタグが使用されなくなる可能性があるため、この方法を使用すると、より標準に準拠したものになります。

11
SacredSkull

この投稿で回答を確認してください：

IEで背景サイズを機能させるにはどうすればよいですか？

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";

IE8で完全に動作します

5
pasx

あなたの画像にストレッチされたクラス（または他のもの）を与え、CSSにこれを入れてください：

img.stretched {
 min-height: 100%;
 min-width: 1024px;
 width: 100%;
 height: auto;
 position: fixed;
 top: 0;
 left: 0;
}

Imgタグは必ず<body>タグのすぐ下に配置してください。

4
Krimo

私はこれのためのプラグインを書きました：

https://github.com/aramkocharyan/CSS-Background-Size-jQuery-Plugin

<div style="width: 400px; height: 300px;">
    <img class="background-size-cover" src="Apple.jpg" />
</div>

<script>
$(document).ready(function() {
    $('.background-size-cover').bgdSize('cover');
});
</script>
3
Aram Kocharyan

2つのアイデア：1.現在、このフィルターが役立つかどうかを確認しようとしています：

AlphaImageLoader

  1. IEでbackground-sizeが不可能な場合は、おそらくbackground-pictureに2つの画像を含める必要があります。最初の画像は何らかの方法で配置する必要があるため、IEで自動的に正しく表示されます。背景サイズを定義する必要はありません。他のすべてのブラウザでは、背景サイズと位置を使用してプッシュすることができます2番目の画像を正しい位置に配置します。今すぐ試してください...
1
frequent

これはIE7で私のために働きます

http://kimili.com/journal/the-flexible-scalable-background-image-redux

ここからIE9.jsライブラリをインストールする必要がある場合があります（IEの多くのバージョンで動作します）

http://code.google.com/p/ie7-js/

1
MarkC80