How to hide part of the image?

Question

I need to do this:

if the image has an height higher of 100px then hide the rest of the image ( example: image with height of 80px -> show full image, image with height of 150px -> show only the first 100px ).

Is there a way to do that with CSS ?

Answer 1

You can use the max-height property to specify the maximum height of the image, and then use overflow: hidden; to hide anything else.

e.g.

HTML:

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

CSS:

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

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

EDIT

For internet explorer 6, you can use CSS expressions to emulate something similar:

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

Do note however that this requires that the user have JavaScript enabled in their browser. My experience with CSS expressions however have been pretty poor, and they're best avoided.