IE'de arka plan boyutunu nasıl çalıştırabilirim?

188

CSS stilini oluşturmanın bilinen bir yolu var mı background-sizeIE'de ?

css internet-explorer

— JD Isaacks
kaynak

1

Hangi etkiyi elde etmeye çalışıyorsunuz?

— ZippyV

@ZippV Yaklaşık 250 piksel genişliğinde bir div var. ancak arka plan resmi 300 piksel genişliğindedir. Arka plan görüntüsünün tamamen sığmasını istiyorum (arka plan boyutu:% 100), bu yüzden kesilmiyor. Daha sonra :hoveryakınlaştırma yanılsaması yaratmak için arka plan boyutunun tam 300 piksel genişliğe (arka plan boyutu: otomatik) değişmesini istiyorum

— JD Isaacks

1

Aynı efekti bir img etiketi kullanarak da elde edebilirsiniz. Üstünde bir şeye ihtiyacınız varsa, z-endeksini kullanın.

— ZippyV

1

@John, Dan'ın geçici çözümü sizin için işe yaradıysa kabul edilen cevabı değiştirmeyi düşünün!

— Pekka

@ZippyV IMG etiketi bazen gereksiz yan etkilere sahiptir, örneğin seçilebilir veya sağ tıklanabilir. Bunlar bazen iyi, bazen değil.

— peterh - Monica

312

Biraz geç, ama bu da yararlı olabilir. Uygulayabileceğiniz IE 5.5+ için bir IE filtresi vardır:

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

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

Ancak, bu tüm görüntüyü ayrılan alana sığacak şekilde ölçeklendirir, bu nedenle bir hareketli grafik kullanıyorsanız bu sorunlara neden olabilir.

Özellikler: AlphaImageLoader Filtre @microsoft

— Dan
kaynak

12

Acaba MS neden sadece CSS kullanarak bu işlevselliği uygulamadı. Çok teşekkürler!

— Martin Andersson

2

Hangi IE sürümleri bunu destekliyor?

— ᆼ ᆺ ᆼ

8

Bunu tanımladığımız öğenin içinde bağlantılar ve düğmeler kullanıyorsanız, bu bağlantılar ve düğmeler çalışmaz. Herkes bunu düzeltmek için bir yöntem biliyor mu?

— rubyprince

2

Ben position: relative; z-index: 999böyle divs içinde giriş, a, düğme eklemek zorunda

— rubyprince

10

Ölçek yöntemi bu oranı korumaz. Bu nedenle, öğenizin görüntünüzle aynı orana sahip olması en iyisidir.

— Yves Van Broekhoven

45

Oluşturduğum jquery.backgroundSize.js : "kapak" ve son çare bir IE8 olarak kullanılabilecek bir 1.5K jquery eklentisi değerleri "içeren". Göz at demo .

— Louis-Rémi
kaynak

12

Jquery.backgroundSize.js belgelerine göre, eklenti kullanımdan kaldırılmıştır ve bunun yerine arka plan boyutunda çoklu dolgu önerirler .

— VOIDHand

Güncellenmiş sürüm ile çalışmaz background-position: fixed.

— Ryan Burney

@VOIDHand Hem filtre hem de çoklu dolgu benim için çalışmadı, başarı için jquery.backgroundSize kullandım

— Chris Marisic

21

Bu yazı sayesinde, çapraz tarayıcı mutluluğu için tam css:

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

Bu kod parçası üzerinde çalıştığımdan beri çok uzun sürdü, ancak daha fazla tarayıcı uyumluluğu için eklemek istiyorum Daha fazla tarayıcı uyumluluğu için bunu CSS'ime ekledim:

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

— Scott Dallas
kaynak

@ Gaurav123 dene-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

— honk31

5

Bu, ie8'imi arka plan resmini iki kez görüntüleyecek şekilde yapar - biri ölçeklendirilmiş boyutlarla ve ikincisi büyük boyutlu olmayan arka plan.

— arekk

ie7: Tamam görünüyor, ancak artık bağlantıları tıklayamıyor. (Neden ie7? Govt sitelerinin güncellenmesi çok yavaş)

— Robbie Matthews

5

Daha sonra bile, ama bu da yararlı olabilir. Arka plan boyutu için bir çoklu dolgu olarak kullanabileceğiniz jQuery-backstretch-plugin var: cover. Ben jQuery ile css-background-url özelliği kapmak ve jQuery-backstretch eklentisine beslemek mümkün (ve oldukça basit) olmalıdır. Modernizr ile arka plan boyutu desteğini test etmek ve bu eklentiyi yedek olarak kullanmak iyi bir uygulamadır.

Backstretch eklentisi burada SO'da belirtilmiştir . JQuery-backstretch-plugin-site burada .

Benzer şekilde, durumunuzda (arka plan boyutu:% 100) ve IE8'de arka plan boyutu çalışmasını sağlayan bir jQuery eklentisi veya komut dosyası yapabilirsiniz. Sorunuzu cevaplamak için: Evet bir yol var ama atm tak ve çalıştır çözümü yoktur (yani kendiniz kodlama yapmanız gerekir).

(sorumluluk reddi: Arka gerdirme eklentisini ayrıntılı olarak incelemedim ama arka plan boyutu ile aynı gibi görünüyor: kapak)

— metatron
kaynak

5

Bunun için iyi bir çoklu dolgu var: louisremi / background-size-polyfill

Belgeleri alıntılamak için:

IE için gereken mime türünü gönderecek .htaccess ile birlikte backgroundsize.min.htc dosyasını web sitenize yükleyin (yalnızca Apache - nginx, düğüm ve IIS'de yerleşiktir).

CSS'nizde arka plan boyutu kullandığınız her yere, bu dosyaya bir referans ekleyin.
.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);
}

— Dorian
kaynak

Bu çoklu dolgu sadece işe yarıyor. arka plan boyutu: IE8'de kapak veya içerir. Kargaşa yok, karışıklık yok.

— jimlongo

bu yaklaşım hem containve cover. Bir ağ paketinde aktarılacağı için çok kötü değil 5.7KB içerir.

— SMMousavi

2

IE11 Windows 7'de bu benim için çalıştı,

background-size: 100% 100%;

— Jana
kaynak

0

IE8 için kullanımı gerçekten basit olan bu dosyayı ( https://github.com/louisremi/background-size-polyfill “arka plan boyutlu çoklu dolgu”) kullanabilirsiniz:

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

0

Aşağıdaki komut dosyası ile denedim -

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

Benim için çalıştı!

— mühür baskısı
kaynak

hangi versiyon için?

— nihiser