¿Cómo ocultar parte de la imagen?

Question

tengo que hacer esto:

si la imagen tiene una altura mayor de 100px a continuación, ocultar el resto de la imagen (ejemplo: imagen con altura de 80px -> mostrar la imagen con la altura de 150 píxeles llena de imágenes, -> Mostrar solo los primeros 100px).

¿Hay alguna manera de hacerlo con CSS?

Answer 1

Puede usar la propiedad max-height para especificar la altura máxima de la imagen, y luego usar overflow: hidden; para ocultar cualquier otra cosa.

p. Ej.

HTML:

<div class="image-container"> 
    <img src="some-image.jpg" /> 
</div> 

CSS:

.image-container { 
    max-height:100px; 
    overflow:hidden; 
} 

jsFiddle muestra: http://jsfiddle.net/3jA9q/

EDITAR

para Internet Explorer 6, puede utilizar CSS expressions emular someth ing similar:

.image-container { 
    height:expression(this.scrollHeight<100?"auto":"100px"); 
    overflow:hidden; 
} 

Sin embargo, tenga en cuenta que esto requiere que el usuario tenga JavaScript habilitado en su navegador. Sin embargo, mi experiencia con las expresiones CSS ha sido bastante pobre, y es mejor evitarlas.

Answer 2

ponerlo en un div con una altura de 100 píxeles y ajuste overflow: hidden;

Answer 3

usted puede hacerlo utilizando un combnation de max-height y overflow.

HTML:

<div> 
    <img> 
</div> 

CSS:

div{ 
    max-height:100px; 
    overflow:hidden; 
} 

También tenga en cuenta que max-height no funciona en los navegadores antiguos, pero si se ha utilizado la normalidad luego height imágenes nunca podría ser más corto que sea 100px.