How to show only the top portion of an image with CSS?

Question

If an image is taller than 115 px, I'd like to only show the top 115px in a square container. I'm trying this with the following:

http://jsfiddle.net/3mRh9/

But I still see the whole image. How can I always show only the top portion of an image using only CSS?

Code:

<div>
    <div class="floated"> 
        <a class="limited">
            <img src="http://change.gov/page/-/officialportrait.jpg"/>
        </a>
    </div>
</div>


.floated {
    border: 1px solid blue;
    float: left;
}
.limited {
    width: 115px;
    height: 115px;
    overflow: hidden;
    border: 1px solid red;
}
img {
    max-width: 115px;
}

Answer 1

http://jsfiddle.net/3mRh9/1/

Add display: block to your .limited style.

.limited {
    width: 115px;
    height: 115px;
    overflow: hidden;
    border: 1px solid red;
    display: block;
}

<a> tags are inline by default, and inline elements cannot have width or height.

Alternatively, you could just wrap with a block-level element, like a div, instead (fiddle):

<div>
    <div class="floated"> 
        <div class="limited">
            <a href="http://example.com">
                <img src="http://change.gov/page/-/officialportrait.jpg"/>
            </a>
        </div>
    </div>
</div>

Answer 2

There is a property that will allow this for showing only part of an image.

It's clip but it only works on absolutely positioned objects.

JSFiddle Demo.

HTML

<div>
    <div class="floated"> 
        <a class="limited">
            <img src="http://change.gov/page/-/officialportrait.jpg"/>
        </a>
    </div>
</div>

CSS

.floated {
    border: 1px solid blue;
    float: left;
}
.limited {
    width: 115px;
    height: 115px;
    display:block;
    border: 1px solid red;
    position:relative;
}

img {
    position:absolute;
    clip:rect(0px,115px,115px,0px);

}

I'm not sure if this is the effect you are after but it is what you asked for.