Arka Plan Resmi Streç% 100 Div Yüksekliği

Question

İçinde dinamik olarak yerleştirilen metne bağlı olarak yükseklikte büyüyecek/küçülecek bir konteynere sahibim. Kap, konteyner yüksekliği değiştikçe germek/küçültmek zorunda olan bir arka plan görüntüsüne sahip olacaktır ve bu görüntü herhangi bir şekilde kırpılamaz. Arka plan görüntüsünün div'un% 100'ü kalmasını sağlamak için .container stilini nasıl yaparım diye merak ediyorum.

ben aşağıdaki denedim, ancak işe görünmüyordu: HTML Yapısının

.container { background: url('backgroundImage.jpg') 0 100% no-repeat; } 

Numune:

<div class="container"> 
    <p class="text">This is a short container</p> 
</div> 

<div class="container"> 
    <p class="text">This<br> is<br> a<br> tall<br> container</p> 
</div> 

Answer 1

background-size özelliğini ayarlamanız gerekir. background-size: 100% 100%;, kabı yatay ve dikey olarak doldurmak için ölçeklendirecektir.

Genellikle görüntüyü gerektiği gibi ölçeklendirdiği ve en boy oranını koruduğu için background-size: cover;'u tercih ederim. Oldukça yeni bir özellik olduğundan, arka plan boyutu için support'u kontrol ettiğinizden emin olun.

Answer 2

Eğer background-size: cover; denediniz mi?

Örneğinizde background-position ayarını yapıyorsunuz.

Answer 3

Arka plan boyutu olarak adlandırılan css3'te bir özellik var: kapak; ve arka plan boyutu: içerir; Gereksinimlerinize uygun olarak background-size:cover;'u kullanmak isteyebilirsiniz. ** contain

arka plan görüntüsü sağlayarak hem boyutları arka yerleştirme alanının karşılık gelen boyutları daha az ya da eşit iken mümkün olduğu kadar büyük olması için ölçekli gerektiğini belirtir.

cover 

arka plan resmi sağlarken küçük mümkün olduğu ölçekli gerektiğini belirtir hem boyutları eşit veya daha arka tekabül eden boyutlarının daha büyük konumlandırma alanı.

durumda background-size: contain; yılında

Answer 4

yararlı değildir ve kaybetmeden boy oranı olmadan tam YÜKSEKLİK arka plan görüntüsü arıyorsanız o zaman aşağıda yazılı CSS

background-size: auto 100%; 

ayarı İlk parametre "için kullanmak ** Otomatik "görüntünün genişliğini geçerli yükseklik oranında tutmasını sağlar. "100%" olan ikinci parametre arka plan görüntüsünün DIV ile aynı yüksekliğe uyum sağlamasına yardımcı olur.