Arka plan resmini div'e sığdır

Aşağıdaki div bir arka plan görüntüsü var, ancak görüntü kesilir:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

Arka plan resmini kesmeden göstermenin bir yolu var mı?

Bunu background-sizeartık çoğu tarayıcı tarafından desteklenen özellik ile başarabilirsiniz .

Arka plan resmini div'in içine sığacak şekilde ölçeklemek için:

background-size: contain;

Arka plan resmini div'ın tamamını kapsayacak şekilde ölçeklemek için:

background-size: cover;

JSFiddle örneği

Ayrıca söz konusudur IE 5.5+ destek için filtreyi yanı sıra bazı eski tarayıcılar için satıcı önekleri .

İhtiyacınız olan şey div ile aynı boyutlara sahip olmaksa, bunun en zarif çözüm olduğunu düşünüyorum:

background-size: 100% 100%;

Değilse, @grc tarafından verilen cevap en uygun olanıdır.

Kaynak: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Bu özellikleri kullanabilirsiniz:

background-size: contain;
background-repeat: no-repeat;

ve sonra kod şöyle:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

ayrıca şunu kullanırsınız:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%; 

Div-değerlerinizi bilmiyorum, ama varsayalım ki bunlara sahipsin.

height: auto;
max-width: 600px;

Yine, bunlar sadece rastgele sayılardır. Arka plan resmini (isterseniz) div için sabit bir genişlikle yapmak oldukça zor olabilir, bu nedenle maksimum genişlik kullanın. Ve aslında bir div'ı arka plan resmiyle doldurmak karmaşık değildir, sadece üst öğeyi doğru şekilde biçimlendirdiğinizden emin olun, böylece görüntünün girebileceği bir yeri vardır.

Chris