Genişliğe uyacak şekilde CSS arka plan resmi, yükseklik orantılı olarak otomatik ölçeklendirilmelidir

Sahibim

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

İstenen efekt, bu arka plan görüntüsünün sayfanınkine eşit genişliğe sahip olması, oranı korumak için yükseklik değiştirmesidir. örneğin orijinal görüntü 100 * 200 (herhangi bir birim) olursa ve gövde 600 piksel genişliğinde ise, arka plan resmi 1200 piksel yüksekliğinde olmalıdır. Pencere yeniden boyutlandırılırsa yükseklik otomatik olarak değişmelidir. Mümkün mü?

Şu anda, Firefox yüksekliği uyduruyor ve sonra genişliği ayarlıyor gibi görünüyor. Bu belki de yükseklik en uzun boyut olduğu ve kırpılmayı önlemeye çalıştığı için mi? Ben istiyorum hiçbir yatay tekrarı: o zaman kaydırma, dikey kırpmak için.

Ayrıca, Chrome görüntüyü ortaya koyuyor, background-repeat:repeataçıkça belirtilse bile tekrarlama yok , bu zaten varsayılan.

Bunun için bir CSS3 özelliği vardır background-size( uyumluluk kontrolü ). Bir uzunluk değerleri ayarlamak mümkün olmakla birlikte, genellikle özel değerlerle kullanılır containve cover. Özel durumunuzda şunları kullanmalısınız cover:

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

İçin Eggsplanation containvecover

Kötü cinayet için özür dilerim, ama gösteri için Biswarup Ganguly tarafından günün resmini kullanacağım . Bunun sizin ekranınız olduğunu ve gri alanın görünür ekranınızın dışında olduğunu varsayalım. Gösteri için 16x9 oranını alacağım.

Günün yukarıda belirtilen resmini arka plan olarak kullanmak istiyoruz. Ancak, herhangi bir nedenle görüntüyü 4x3'e kırptık. background-sizeMülkü sabit bir uzunluğa ayarlayabiliriz , ancak containve üzerine odaklanacağız cover. Ayrıca genişliğini ve / veya yüksekliğini değiştirmediğimizi varsayalım body.

contain

contain

İçsel en boy oranını (varsa) korurken görüntüyü, hem genişliği hem de yüksekliği arka plan konumlandırma alanına sığabilecek şekilde en büyük boyuta ölçeklendirin.

Bu, arka plan görüntüsünün her zaman arka plan konumlandırma alanında tamamen yer almasını sağlar, ancak background-colorbu durumda boş alanınız olabilir :

cover

cover

İçsel en boy oranını (varsa) korurken görüntüyü, hem genişliği hem de yüksekliği arka plan konumlandırma alanını tamamen kaplayacak şekilde en küçük boyuta ölçeklendirin.

Bu, arka plan görüntüsünün her şeyi kapsadığından emin olur. Görünür olmayacak background-color, ancak ekranın oranına bağlı olarak görüntünüzün büyük bir kısmı kesilebilir:

Gerçek kod ile gösteri

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Https://developer.mozilla.org/en-US/docs/CSS/background-size adresindeki ipuçlarına dayanarak, benim için çalışan aşağıdaki tarifi buldum

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Tam olarak ne aradığınızdan emin değilim, ancak CSS-Tricks'ten Chris Coyier tarafından yazılan bu mükemmel blog yayınlarına gerçekten göz atmalısınız:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Makalelerin her birinin açıklamalarını okuyun ve aradığınızı görün.

İlk soru şu cevabı verir:

Bir arka plan resmini yeniden boyutlandırılabilir yapmanın bir yolu var mı? Olduğu gibi, tarayıcı penceresinin boyutu ne olursa olsun, bir web sayfasının arka planını kenardan kenara bir görüntüyle doldurun. Ayrıca, tarayıcı penceresi değiştikçe yeniden boyutlandırılmasını sağlayın. Ayrıca, oranını koruduğundan emin olun (tuhaf bir şekilde uzanmaz). Ayrıca, kaydırma çubuklarına neden olmaz, sadece gerekirse dikey olarak keser. Ayrıca, sayfada satır içi etiket olarak gelir.

İkinci gönderinin amacı aşağıdakileri elde etmektir, "bir web sitesinde her zaman tüm tarayıcı penceresini kapsayan bir arka plan görüntüsü."

Bu yardımcı olur umarım.

Arka plan resmi mükemmel değil sonra onun css sorun oluşturmak için onun css dosyası aşağıdaki kodu değiştirin

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; arka plan boyutu:% 100% 100; "

Bunu dene,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Sadece bir satır ekleyin:

    .your-class {
        height: 100vh;
    }

vh görüntü yüksekliğidir. Bu, cihazın tarayıcı penceresine sığacak şekilde otomatik olarak ölçeklendirilir.

Buradan daha fazlasını kontrol edin: div tarayıcı penceresinin% 100 yüksekliğini yapın

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

Aynı sorunu yaşadım, tarayıcı boyutlarını ayarlarken resmi yeniden boyutlandıramıyorum.

Hatalı Kod:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

İyi Kod:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

Buradaki anahtar, bu öğenin eklenmesidir -> arka plan boyutu: içerir;

İşte benim için işe yarayan:

background-size: auto 100%;

Arka plan boyutunu ayarlamak yardımcı olmaz, aşağıdaki çözüm benim için çalıştı:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

Temel olarak görüntüyü kırpar ve sığdırır, background-size: contain/coveryine de sığdırmaz.