Bagaimana cara membuat ukuran latar bekerja di IE?

Apakah ada cara yang diketahui untuk membuat gaya CSS background-sizeberfungsi di IE?

Agak terlambat, tapi ini juga bisa berguna. Ada filter IE, untuk IE 5.5+, yang dapat Anda terapkan:

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

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

Namun, ini menskala seluruh gambar agar pas di area yang dialokasikan, jadi jika Anda menggunakan sprite, ini dapat menyebabkan masalah.

Spesifikasi: Filter AlphaImageLoader @ microsoft

Saya membuat jquery.backgroundSize.js : plugin jquery 1.5K yang dapat digunakan sebagai fallback IE8 untuk nilai "cover" dan "mengandung". Lihatlah demo .

Berkat posting ini, css lengkap saya untuk kebahagiaan lintas browser adalah:

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

Sudah begitu lama sejak saya mengerjakan potongan kode ini, tetapi saya ingin menambahkan lebih banyak kompatibilitas browser. Saya menambahkan ini ke CSS saya untuk lebih banyak kompatibilitas browser:

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

Bahkan nanti, tapi ini bisa berguna juga. Ada jQuery-backstretch-plugin yang dapat Anda gunakan sebagai polyfill untuk ukuran latar belakang: sampul. Saya kira itu mungkin (dan cukup sederhana) untuk mengambil properti css-background-url dengan jQuery dan memasukkannya ke plugin jQuery-backstretch. Praktik yang baik adalah menguji dukungan ukuran latar belakang dengan modernizr dan menggunakan plugin ini sebagai cadangan.

Plugin backstretch disebutkan di SO di sini . Situs jQuery-backstretch-plugin ada di sini .

Dengan cara yang sama Anda bisa membuat jQuery-plugin atau skrip yang membuat ukuran latar berfungsi di situasi Anda (ukuran latar: 100%) dan di IE8-. Jadi untuk menjawab pertanyaan Anda: Ya ada cara tetapi atm tidak ada solusi plug-and-play (yaitu Anda harus melakukan beberapa pengkodean sendiri).

(Penafian: Saya tidak memeriksa backstretch-plugin dengan seksama tetapi sepertinya melakukan hal yang sama dengan ukuran latar: cover)

Ada polyfill yang bagus untuk itu: louisremi / background-size-polyfill

Mengutip dokumentasi:

Unggah backgroundsize.min.htc ke situs web Anda, bersama dengan .htaccess yang akan mengirim tipe mime yang diperlukan oleh IE (hanya Apache - ini dibangun di nginx, node dan IIS).

Di mana-mana Anda menggunakan ukuran latar belakang di CSS Anda, tambahkan referensi ke file ini.

.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);
}

Di IE11 Windows 7 ini bekerja untuk saya,

background-size: 100% 100%;

Anda dapat menggunakan file ini ( https://github.com/louisremi/background-size-polyfill "polyfill ukuran latar belakang") untuk IE8 yang sangat mudah digunakan:

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

Saya mencoba dengan skrip berikut -

.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;
}

Itu berhasil untuk saya!