Css фон-размер обложки в Internet Explorer 7

Я знаю, что IE7 не поддерживает background-size cover.

Я искал в Интернете некоторые решения, но единственное, что у меня есть, это то, что я должен положить img с width: 100% и height:100% и поместить его в качестве фона.

Это единственное решение? Я видел некоторые решения с -ms-filter, но это не сработало. Есть ли у кого-нибудь другое решение?

1 специальная вещь: У меня более 1 div, у которого есть свойство покрытия background-size.

В 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>

Ответы

Ответ 1

Используя Modernizr, вы можете узнать, на что способен пользовательский браузер.

Установите Modernizr, связав его в своем заголовке

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

И в вашем теге HTML

<html class="no-js">

С помощью CSS вы можете стилизовать свою страницу, как ее поддерживает браузер. Проверить документацию на предмет того, какое обнаружение поддерживается. В этом случае нам нужен класс background-size

В вашем файле CSS - для браузеров без фонового размера (AKA только 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%, могут перестать использоваться.

Ответ 2

Отметьте эту запись для ответа:

Как создать фоновый размер в IE?

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

Работает отлично в IE8

Ответ 3

Дайте вашему изображению класс растянутого (или что-то еще) и в вашем css поставьте это:

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

Обязательно поставьте свой тег img под тегом <body>.

Ответ 4

Я написал для этого плагин:

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>

Ответ 6

Две идеи: 1. В настоящее время я пытаюсь выяснить, помогает ли этот фильтр:

AlphaImageLoader

  • Если размер фона в IE невозможен, возможно, вам придется сделать фоновое изображение состоящим из двух изображений. Первое изображение должно быть помещено таким образом, чтобы оно автоматически отображалось в IE без необходимости определять размер фона. Для всех других браузеров вы можете использовать размер фона и положение, чтобы вставить 2-е изображение в правильное положение. Попробуйте это сейчас...