How do I make an image start at the bottom of it's container?

I have a tall image inside a short container with overflow: hidden;. The bottom of the image is cut开发者_运维百科 off. How do I make the top get cut off instead of the bottom?

give the container the following css:

position:relative;

and the image the following css:

position:absolute;
bottom:0px;

P.S.
Very nice (and clear) illustrations btw

If your image is just the background-image of the container, do this way:

#container {
    background: url(your-image.jpg) no-repeat bottom left;
}

Otherwise, position the img element to the bottom of the container, like @Joseph suggested:

#container {
    position:relative;
}

#container img {
    position: absolute;
    bottom: 0px;
}

If the container has a 300px height for example, this works:

.container {
  overflow: hidden;
  height: 300px;
  position: relative;
}

.image {
  position: absolute;
  bottom: 0;
}