CSS arka planını genişletme ve ölçeklendirme

CSS'de kapını dolduracak şekilde germek veya ölçeklendirmek için bir arka plan edinmenin bir yolu var mı?

Modern tarayıcılar için bunu kullanarak şunları yapabilirsiniz background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover görüntüyü dikey veya yatay olarak uzatmak anlamına gelir, böylece hiçbir zaman döşemez / tekrarlamaz.

Safari 3 (veya üstü), Chrome, Opera 10+, Firefox 3.6+ ve Internet Explorer 9 (veya üstü) için işe yarar.

Internet Explorer'ın daha düşük sürümleriyle çalışabilmesi için şu CSS'yi deneyin:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

CSS 3 özelliğini kullanın background-size:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Bu, 2012'den beri modern tarayıcılar için kullanılabilir.

Bir görüntüyü CSS ile ölçeklemek tam olarak mümkün değildir, ancak benzer bir etki aşağıdaki şekilde elde edilebilir.

Bu işaretlemeyi kullanın:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

aşağıdaki CSS ile:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

ve bitirmelisin!

Görüntüyü "tam taşma" olacak şekilde ölçeklendirmek ve en boy oranını korumak için bunun yerine bunu yapabilirsiniz:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

Oldukça güzel çalışıyor! Bununla birlikte, bir boyut kırpılırsa, görüntünün her iki tarafında eşit olarak kırpılmak (ve ortalanmak) yerine yalnızca bir tarafına kırpılır. Firefox, Webkit ve Internet Explorer 8'de test ettim .

CSS3'te arka plan boyutu özelliğini kullanın :

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

DÜZENLEME: Modernizr destekler arka boyutlu destek saptanmasını . Çalışmak için yazılmış bir JavaScript geçici çözümü kullanabilirsiniz, ancak buna ihtiyacınız vardır ve destek olmadığında dinamik olarak yükleyebilirsiniz. Bu, belirli tarayıcılar için müdahaleci CSS saldırılarına başvurmadan kodun korunmasını sağlar.

Şahsen ben jQuery, onun imgsizer bir uyarlaması kullanarak başa çıkmak için bir komut dosyası kullanın . Artık tasarımların çoğunda, cihazlardaki akışkan düzenleri için genişlik% 'leri kullandığımdan, döngülerden birine hafif bir adaptasyon var (her zaman% 100 olmayan boyutları hesaba katar):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDIT: Ayrıca ilginizi çekebilir jQuery CSS3 Finaliz [s] e .

Makalenin arka plan boyutunu deneyin . Aşağıdakilerin tümünü kullanırsanız, Internet Explorer dışındaki çoğu tarayıcıda çalışır.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

Şu an değil. CSS 3'te mevcut olacak , ancak çoğu tarayıcıda uygulanması biraz zaman alacaktır.

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Çalıştığı yerler:

• Safari 3+
• Chrome +
• IE 9+
• Opera 10+ (Opera 9.5, arka plan boyutunu destekledi ancak anahtar kelimeleri desteklemedi)
• Firefox 3.6+ (Firefox 4, satıcı olmayan ön ekli sürümü destekler)

Ayrıca bunu bir başka çözüm için deneyebilirsiniz

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Bu makaleye Chris Coyier tarafından verilen http://css-tricks.com/perfect-full-page-background-image/

Tek kelimeyle: hayır. Bir görüntüyü uzatmanın tek yolu <img>etiketi kullanmaktır. Yaratıcı olmalısın.

Bu, cevabın yazıldığı 2008'de doğruydu. Bugün background-sizebu sorunu çözen modern tarayıcılar desteklenmektedir . IE8'in desteklemediğine dikkat edin.

"Uzat ve ölçeklendir" i tanımlayın ...

Bir bitmap formatınız varsa, onu uzatmak ve çekmek için genellikle harika (grafiksel olarak konuşulur) değildir. Aynı efektin yanılsamasını vermek için tekrarlanabilir desenler kullanabilirsiniz. Örneğin, sayfanın altına doğru hafifleyen bir gradyanınız varsa, tek bir piksel genişliğinde ve kapınızla aynı yükseklikte (veya tercihen ölçeklendirmeyi hesaba katmak için daha büyük) bir grafik kullanırsınız ve ardından sayfa. Benzer şekilde, degrade sayfa boyunca yayınlanırsa, konteynerinizden bir piksel yüksekliğinde ve daha geniş olur ve sayfayı tekrarlar.

Normalde, kap büyüdüğünde veya küçüldüğünde kabı doldurmak için gerilme yanılsamasını vermek için görüntüyü kaptan daha büyük yaparsınız. Herhangi bir çakışma konteynerin sınırları dışında gösterilmez.

Kavisli kenarları olan bir kutu gibi bir şeye dayanan bir efekt istiyorsanız, kutunuzun sol tarafını konteynerinizin sol tarafına, konteynerin ne kadar büyük olursa olsun (dolayısıyla) yeterince örtüşmeyle yapıştıracaksınız, asla arka plan biterse ve sonra kutunun sağ tarafının bir görüntüsünü kavisli kenarlarla katmanlar ve kabın sağına yerleştirirsiniz. Böylece konteyner küçüldükçe veya büyüdükçe, kavisli kutu etkisi küçülüyor veya onunla büyüyor gibi görünüyor - aslında değil, ama olan yanılsamayı veriyor.

Görüntünün kapla gerçekten küçülmesini ve büyümesini sağlamak için, görüntünün arka plan olarak işlev görmesi için bazı katmanlama hileleri ve kapla yeniden boyutlandırmak için bazı javascript kullanmanız gerekir. Bunu CSS ile yapmanın güncel bir yolu yok ...

Vektör grafikleri kullanıyorsanız, korktuğum uzmanlık alanımın çok dışındasınız.

Ben bunu yaptım. Streç sınıfında, yüksekliği sadece olarak değiştirdim auto. Bu şekilde arka plan resminiz her zaman ekranın genişliği ile aynı boyuta sahip olur ve yükseklik her zaman doğru boyuta sahip olur.

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

background-attachmentSatır ekleyin :

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Bu yapmaya eşdeğer olduğunu belirtmek istiyorum:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

Bunun için bir başka harika çözüm, vücuda veya sayfadaki herhangi bir öğeye uygulanabilen Srobbin'in Backstretch'i - http://srobbin.com/jquery-plugins/backstretch/

Bunu dene

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

SolidSmile'ın hile için ek bir ipucu, bir genişlik ayarlayarak ve yükseklik için otomatik kullanarak ölçeklendirmektir (orantılı yeniden boyutlandırma).

Ör:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

Kullan border-image : yourimageGörüntünüzü ayarlamak ve ekranınızın veya pencerenizin tüm kenarlığına kadar ölçeklendirmek özelliği .