Rozwiń obraz wewnątrz DIV

Question

Jak mogę powiększyć obraz tak, aby miał wysokość po zmianie rozmiaru? Albo jak mogę wypełnić białą przestrzeń pozostawioną przez obraz kolorem?

Answer 1

myślę, że to będzie Ci pożądany wynik:

<style> 
    div { 
    width:50px; 
    height:100px; 
    } 

    div img { 
    height:100%; 
    } 
</style> 
<div> 
    <img src='path/to/img.gif' /> 
</div> 

Obraz będzie teraz wypełnić do wysokości pojemnika div i skala jego szerokość z jej aspektów stosunek. Może to spowodować, że obraz rozwinie się poza granice szerokości przedziału kontenera, chociaż należy zachować ostrożność.

Answer 2

ustawić kolor tła dla div kontenera

Answer 3

Jest sposób, aby to zrobić w CSS3:

div {background-image: url(path/to/image); background-size: 100%} 

Właściwość background-size jest obsługiwana tylko w nowszych wersjach Safari i Opera. W przypadku innych przeglądarek, można wypełnić odstępy w lewo wokół obrazu w kolorze przy użyciu właściwości background-color, tak:

div { 
    background-image: url(path/to/image); 
    background-size: 100%; 
    background-color: #000000; 
    } 

Lub, skrót:

div {background:#000000 url(path/to/image) no-repeat; background-size:100%} 

Stosując ten kod spowodować rozciągnięcie obrazu w przeglądarkach obsługujących CSS3 (najnowsza Opera, Safari i ewentualnie Firefox). Starsze przeglądarki i IE będą miały białe spacje wokół obrazu wypełnionego określonym kolorem tła.