Genişliği, yüksekliği uygun arka plan görüntü oranı otomatik ölçekli gerektiğini CSS | Netgez.com
SORU
13 ÅžUBAT 2012, PAZARTESÄ°

Genişliği, yüksekliği uygun arka plan görüntü oranı otomatik ölçekli gerektiğini CSS

Var

body {
    background: url(images/background.svg);
}

İstenen etkiyi bu arka plan görüntüsü sayfasına eşit, yükseklik değiştirme oranı korumak için eksik olacaktır. orijinal resmin 100*200 (herhangi bir birim) olur ve vücut 600px genişliğinde örneğin, arka plan görüntüsü 1200px yüksek olmuyor. Yükseklik eğer pencere yeniden boyutlandırıldığında otomatik olarak değiştirmek gerekir. Bu mümkün mü?

Şu anda Firefox yüksekliği uygun bir hale getirilmesi ve daha sonra genişliği ayarlama gibi görünüyor. Yüksekliği en uzun boyut ve kırpma önlemek için çalışıyoruz, çünkü bu belki de? Benistiyorumdikey olarak kırpmak için, kaydırma: hayır yatay tekrarlayın.

Ayrıca, Krom zaten varsayılan olarak Merkezi, background-repeat:repeat açıkça belirtilmiş olan bile yok tekrar ediyorum, görüntü çiziyor.

CEVAP
13 ÅžUBAT 2012, PAZARTESÄ°

Bu, background-size (compatibility check) olmak üzere CSS3 bir özelliği var. Bir uzunluk değerlerini ayarlamak mümkün olmakla birlikte, genellikle özel değerleri contain cover ile kullanılır. Belirli bir durumda cover kullanmanız gerekir:

body {
    background-image:  url(images/background.svg);
    background-size:   cover;                      /* <------ */
    background-repeat: no-repeat;
    background-position: center center;            /* optionally, center the image */
}

contain cover Eggsplanation

Kötü espri için özür dilerim, ama gösteri için picture of the day by Biswarup Ganguly kullanacağım. Bu ekran olduğunu söylemek sağlar, ve gri alanı görünür ekran dışında. Gösteri için, 16x9 oranı kabul edeceğim.

screen

Bir arka plan olarak günün sözü geçen resim kullanmak istiyoruz. Ancak nedense 4x3 görüntü biz kırpılmış. Bazı sabit uzunlukta background-size özelliği çıkartabiliriz, ama contain cover odaklanacağız. Ben de body genişlik ve/veya yükseklik bozmak istemedik varsayalım unutmayın.

contain

contain

İç görünüm oranını (varsa), hem de genişliği gibi en büyük boyutu koruyarak, görüntü ölçek, yüksekliği arka plan konumlandırma alanı içinde uygun olabilir.

Bu arka plan görüntüsü her zaman tamamen arka plan konumlandırma alanında yer alıyor, ancak, bu durumda biraz boş alan ile background-color dolu olabilir

contain

cover

cover

İç görünüm oranını (varsa), hem de genişliği gibi küçük boyutu ve koruyarak, görüntü ölçek, yüksekliği tamamen arka plan konumlandırma alanı kapsayacak.

Bu arka plan görüntüsü her şeyi kapsayan kesinleştirir. Hiçbir görünür background-color, ancak resmin büyük bir kısmı kesilmiş olabilir ekran oranına bağlı olacaktır

cover

Bunu PaylaÅŸ:
  • Google+
  • E-Posta
Etiketler:
HtmlCss

AYNI ETÄ°KETTEKÄ° VÄ°DEOLAR

YORUMLAR

SPONSOR VÄ°DEO

Rastgele Yazarlar

  • JonnyEthco

    JonnyEthco

    5 EKÄ°M 2006
  • Project Mooncircle

    Project Moon

    6 Aralık 2009
  • Rozetked | Обзоры

    Rozetked | Ð

    5 AÄžUSTOS 2011

Ä°LGÄ°LÄ° SORU / CEVAPLAR

Ä°LGÄ°LÄ° BAÄžLANTILAR