Bir mutlak konumlandırılmış görüntünün genişlik ve yüksekliğini bir satırda css ile değiştirme: önce:

Question

Bir görüntüyü css kullanarak bir div yerleştirmeye çalışıyorum: önce konum: mutlak; zaten bu divda bir görüntü var. Bu mutlak konumlandırılmış görüntünün yüksekliğini veya genişliğini neden kontrol edemiyorum?

css:

div:before{ 
    content:url('buble.png'); 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    height:auto; 
    z-index:200; 
} 

html:

<div><img src="profile_pic.png" alt="" /></div> 

Answer 1

Açıklama: İçerik yerleştirin eğer

Sen görüntüye Css özelliklerini uygulamak mümkün olmayacaktır :before sözde öğenin. ayarladığınız width/height, yalnızca içeriğe değil, sözde öğeye uygulanır.

Çözüm:

:before sözde elemanının arka plan olarak resim ayarlayın. Ardından, resmi istediğiniz gibi boyutlandırmak için background-size özelliğini kullanabilirsiniz.

FIDDLE

olarak, cover/contain gibi boyutuna görüntü veya değerleri yüzdelerini kullanabilirsiniz background-size özellikleri açıklanmıştır. Görüntüyü background-position kullanarak yatay/dikey olarak konumlandırabilirsiniz.

CSS:

div {position:relative;width:350px;} 
div:before{ 
    content:""; 
    position:absolute; 
    background-image : url('buble.png'); 
    background-size:contain; 
    width:100%; 
    height:100%; 
    z-index:200; 
} 

Answer 2

You cannot change the dimensions of the image when inserted this way. Diğerleri de belirttiği gibi, oluşturulan içerik üzerinde background-image'u kullanabilirsiniz.