CSS: Pencereden daha büyükse arka plan resmini ölçeklendir, aksi halde 100% tutun

Web sitemde, arka plan görüntüsünü pencere çözünürlüğüyle ölçeklendiren, ancak orijinalinin ötesinde ölçeklenmeyen bir arka plan resmi dağıtmak istiyorum boyut (1920x1080). Böylelikle, daha küçük çözünürlüklere sahip kullanıcılar, tüm görüntüyü hala görebilir, ancak ötesindekiler çirkin bir arka plana sahip değildir.CSS: Pencereden daha büyükse arka plan resmini ölçeklendir, aksi halde 100% tutun

Arka plan resimleri, genellikle böyle bir amaçla kullanacağım max-width gibi özellikleri desteklemiyor.

Çözüm ne olabilir? Bu ek kod yazmadan CSS'de mümkün mü?

kaynak

2013-10-30 ividyon

Daha sonra biraz jquery/javascript'e ihtiyacınız olacaktır –

Ben max-genişliğinde sargı olarak bir div kullanmak ve bu div için arka plan ayarlamak olacaktır.

HTML

<body> 
<div class="container">Content</div> 
</body>

CSS

.container { 
    width: 100%; 
    max-width: 1920px; /* YOUR BG MAX SIZE */ 
    background:url("bg.png") no-repeat; 
    background-size: 100%; 
}

kaynak

2013-10-30 13:29:50 jensborje

Belirli bir id

ör bir html <img> etiketi oluşturmayı deneyebilirsiniz

HTML

<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />

CSS dinamik İçin

img#mybg { 
    position: fixed; //image will always be top: 0 left: 0 by default. 
    display: block; //make it a block for width to work. 
    width: 100%; //set default width 
    height: 100%; //set default height 
    max-width: 1920px; //set max width 
    max-height: 1080px; //set max height 
    z-index: -999999; //set z-index so it won't overlap any other element. 
}

Bir window.onresize olayla birlikte Javascript kullanmak zorunda kalacak merkezleme.

Daha fazla bilgiye ihtiyacınız varsa, gönderimi uygun şekilde düzenlerim.

Kullanmak çok kolay (ama arka planınızı uzatır) iyi bir alternatif jquery backstretch plugin kullanmak olacaktır. Çözünürlükle ölçeklenecek tam ekran arka plan görüntüsünü eklemenizi sağlar (tam olarak ne istediğinizi değil, düşündüğüm en iyi alternatif).

kaynak

2013-10-30 12:47:44 SidOfc

Bunu deneyebilirsiniz. Herhangi bir boyut görüntü çözünürlüğü duyarlı gibi çalışır:

img#mybg { 
    position: fixed; //image will always be top: 0 left: 0 by default. 
    display: block; //make it a block for width to work. 
    width: 100%; //set default width 
    height: 100%; //set default height 
    max-width: 1920px; //set max width 
    max-height: 1080px; //set max height 
    z-index: -999999; //set z-index so it won't overlap any other element. 
    background-size:100% 100%; 
}

kaynak

2013-10-30 12:53:23 vadlamani

Sadece gerçekten küçük/hızlı öneri:

görünüyor ve hep birlikte nasıl aktığını bağlı olarak, background-size:contain; olabilir bir seçenek.

veya vücudunuzda maksimum genişliği 1920 olarak ayarlayın, kenar boşluklarını otomatik olarak ayarlayın ve bu sizin için de işe yarayabilir.

kaynak

2013-10-30 13:36:04 ndugger

CSS: Pencereden daha büyükse arka plan resmini ölçeklendir, aksi halde 100% tutun

cevap

İlgili konular