Come nascondere parte dell'immagine?

Question

Ho bisogno di fare questo:

se l'immagine ha un'altezza maggiore di 100px poi nascondere il resto dell'immagine (esempio: un'immagine con un'altezza di 80px -> mostra l'immagine, un'immagine con un'altezza di 150px -> show solo il primo 100 px).

C'è un modo per farlo con i CSS?

Answer 1

È possibile utilizzare la proprietà max-height per specificare l'altezza massima dell'immagine, quindi utilizzare overflow: hidden; per nascondere qualsiasi altra cosa.

ad es.

HTML:

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

CSS:

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

JSFiddle Esempio: http://jsfiddle.net/3jA9q/

EDIT

per Internet Explorer 6, è possibile utilizzare per emulare CSS expressions someth ing simile:

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

Do atto, tuttavia, che questo richiede che l'utente un JavaScript nel browser. La mia esperienza con le espressioni CSS tuttavia è stata piuttosto scarsa, e sono meglio evitati.

Answer 2

metterlo in un div con un'altezza di 100px e impostare overflow: hidden;

Answer 3

è possibile farlo utilizzando una combnation di max-height e overflow.

HTML:

<div> 
    <img> 
</div> 

CSS:

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

Si noti inoltre che max-height non funziona nei browser meno recenti, ma se si è utilizzato il normale height poi le immagini non potrebbe mai essere inferiore a 100px neanche.