Ho un DIV di dimensioni 147x88 e al suo interno un'immagine che ha la stessa larghezza, ma potrebbe essere più grande in altezza. In questo caso, l'immagine supera il limite del DIV. C'è comunque da ritagliare l'immagine, tenendo presente che voglio che la mia pagina funzioni nei vecchi browser che non supportano CSS3 (IE7 e IE8)?Contenuto interno del ritaglio di ritaglio
Basta nascondere l'overflow del div e l'immagine che contiene verrà ritagliata alle dimensioni del div.
div{width: 147px; height: 88px; overflow: hidden;}
div { width: 147px; height: 88px; overflow: hidden; }
Questo question mostra come ottenere la dimensione dell'immagine utilizzando jQuery. È possibile avere un piccolo blocco che controlla la dimensione dell'immagine quando si carica la pagina e impostare la dimensione del DIV di conseguenza.
Imposta overflow:hidden; sul div:
#yourDiv {
width:147px;
height:88px;
overflow:hidden;
}
Esempio: http://jsfiddle.net/purmou/sN5PL/
'overflow: hidden' lavora per contenuti statici. Tuttavia, cosa succede se si sta animando il contenuto all'interno del div? L'overflow si annulla mentre si sta animando e poi ritorna quando l'animazione è terminata. Qualche soluzione alternativa? – Pyroglyph