Jak zmienić szerokość i wysokość bezwzględnego obrazu umieszczonego w div przez css: przed

Question

Próbuję umieścić obraz w div przy użyciu css: before z position: absolute; istnieje już obraz w tym dziale. Dlaczego nie mogę kontrolować wysokości lub szerokości tego bezwzględnego obrazu?

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

Objaśnienie:

Nie będzie w stanie zastosować właściwości CSS do obrazu, jeśli umieścić go w treści z pseudo elementu :before. Ustawiony przez ciebie width/height dotyczy tylko pseudo elementu, a nie jego zawartości.

Rozwiązanie:

Ustaw obraz jako tło elementu :before pseudo. Następnie możesz użyć właściwości background-size, aby zmienić rozmiar obrazu zgodnie z potrzebami.

FIDDLE

Jak wyjaśniono w background-size specyfikacji, można użyć wartości procentowe do rozmiaru obrazu lub wartości jak cover/contain. Możesz także ustawić, wyśrodkować poziomo/pionowo swoje zdjęcie, używając background-position.

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. Jak wspomnieli inni, możesz zamiast tego używać wygenerowanej treści jako background-image.