Tengo un DIV de tamaño 147x88 y dentro de él una imagen que tiene el mismo ancho, pero puede ser más grande en altura. En este caso, la imagen va más allá del límite del DIV. ¿Hay alguna forma de recortar la imagen, teniendo en cuenta que quiero que mi página funcione en navegadores antiguos que no son compatibles con CSS3 (IE7 e IE8)?Clipping div contenido interno
Simplemente oculte el desbordamiento del div, y la imagen que lo contiene se recortará a las dimensiones del div.
div{width: 147px; height: 88px; overflow: hidden;}
div { width: 147px; height: 88px; overflow: hidden; }
Este question muestra cómo obtener el tamaño de la imagen usando jQuery. Puede tener un pequeño bloque que verifique el tamaño de la imagen al cargar la página, y configure el tamaño del DIV en consecuencia.
Conjunto overflow:hidden; en el div:
#yourDiv {
width:147px;
height:88px;
overflow:hidden;
}
Ejemplo: http://jsfiddle.net/purmou/sN5PL/
'desbordamiento: hidden' trabaja para el contenido estático. Sin embargo, ¿qué ocurre si estás animando el contenido dentro del div? El desbordamiento se cancela mientras se está animando y luego vuelve cuando termina la animación. ¿Alguna solución? – Pyroglyph