Як змусити фоновий розмір працювати в IE?

Чи є відомий спосіб змусити CSS-стиль background-sizeпрацювати в IE?

Трохи пізно, але це також може бути корисним. Існує IE-фільтр для IE 5.5+, який ви можете застосувати:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

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

Однак це масштабує все зображення для розміщення у виділеній області, тому, якщо ви використовуєте спрайт, це може спричинити проблеми.

Специфікація: AlphaImageLoader Filter @microsoft

Я створив jquery.backgroundSize.js : плагін jquery 1.5K, який можна використовувати як запасний варіант IE8 для значень "cover" та "содержать". Погляньте на демонстрацію .

Завдяки цій публікації мій повний css для щасливого перегляду в браузері:

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

З даного часу я працював над цим фрагментом коду, але я хотів би додати більше сумісності браузера. Я додав це до свого CSS для більшої сумісності браузера:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Навіть пізніше, але це також може бути корисним. Є плагін jQuery-backstretch, який ви можете використовувати як поліфактор для фонового розміру: cover. Я думаю, що це повинно бути можливо (і досить просто) схопити властивість css-background-url за допомогою jQuery і подати його в плагін jQuery-backstretch. Доброю практикою було б перевірити підтримку фонового розміру за допомогою модернізатора та використовувати цей плагін як резервний.

Бекстретч-плагін був згаданий на SO тут .Готель JQuery-Бекстретч-плагін-сайт тут .

Аналогічним чином ви можете зробити jQuery-плагін або скрипт, який робить розмір фону у вашій ситуації (розмір фону: 100%) та в IE8-. Тож, щоб відповісти на ваше запитання: Так, є спосіб, але atm немає рішення для підключення та програвання (тобто ви повинні зробити кодування самостійно).

(відмова від відповідальності: я не вивчив плагін backstretch ретельно, але, схоже, це робиться так само, як і розмір фону: cover)

Для цього є хороший поліфайл : louisremi / background-size-polyfill

Для цитування документації:

Завантажте backgroundsize.min.htc на свій веб-сайт разом з .htaccess, який надсилатиме потрібний для mE тип mime (лише Apache - він вбудований у nginx, вузол та IIS).

Скрізь, де ви використовуєте розмір фону у своєму CSS, додайте посилання на цей файл.

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

У IE11 Windows 7 це працювало для мене,

background-size: 100% 100%;

Ви можете використовувати цей файл ( https://github.com/louisremi/background-size-polyfill “поліфіл-розмір фонового зображення”) для IE8, який дуже простий у використанні:

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}

Я спробував із наступним сценарієм -

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

Це працювало для мене!