Jak ukryć część obrazu?

Question

muszę to zrobić:

jeśli obraz ma wysokość wyższy od 100px następnie ukryć resztę Obraz (przykład: zdjęcie z wysokości 80px -> pokazuje pełny obraz, obraz z wysokości 150px -> Pokaż tylko pierwsze 100px).

Czy można to zrobić za pomocą CSS?

Answer 1

Możesz użyć właściwości max-height, aby określić maksymalną wysokość obrazu, a następnie użyj overflow: hidden;, aby ukryć cokolwiek innego.

np.

HTML:

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

CSS:

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

JSFiddle Próbka: http://jsfiddle.net/3jA9q/

EDIT

dla programu Internet Explorer 6, można użyć CSS expressions naśladować someth podobne:

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

Należy jednak pamiętać, że wymaga to włączenia w przeglądarce obsługi JavaScript. Moje doświadczenia z wyrażeń CSS były jednak dość słabe i najlepiej ich unikać.

Answer 2

Umieścić go w div o wysokości 100px i ustawić overflow: hidden;

Answer 3

Można to zrobić za pomocą combnation z max-height i overflow.

HTML:

<div> 
    <img> 
</div> 

CSS:

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

Należy również pamiętać, że max-height nie działa w starszych przeglądarkach, ale jeśli stosowane normalne height następnie obrazy nigdy nie mógł być krótszy niż 100px albo.