Ho un'immagine alta all'interno di un contenitore corto con overflow: hidden;. La parte inferiore dell'immagine è tagliata. Come faccio a tagliare la parte superiore anziché quella inferiore?Come faccio a far partire un'immagine nella parte inferiore del suo contenitore?
invia il contenitore seguente css:
position:relative;
e l'immagine seguente css:
position:absolute;
bottom:0px;
P.S.
Molto bello (e chiare) illustrazioni indipendente tra
+1, dal momento che hai risposto praticamente con la stessa risposta che stavo per presentare! =) Posso offrirti la demo su cui stavo lavorando: [JS Fiddle] (http://jsfiddle.net/davidThomas/47Qne/1/). –
Sinceramente non capisco come sono passato da +1 a -2 a 0 a +2 in 5 minuti O_o –
@David Thomas Whoa! Fantastica demo! (potrebbe essere un po 'eccessivo) ma comunque fatto molto bene! –
Se l'immagine è solo il background-image del contenitore, fare in questo modo:
#container {
background: url(your-image.jpg) no-repeat bottom left;
}
In caso contrario, posizionare l'elemento img al fondo del contenitore, come @Joseph suggerito:
#container {
position:relative;
}
#container img {
position: absolute;
bottom: 0px;
}
Ok bene, grazie. Ho HTML come questo: '
Se il contenitore ha un'altezza 300px per esempio, questo funziona:
+1 per l'illustrazione. –