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

Question

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?

Katabasis

Answer 1

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

Erle

+1, since you answered with pretty much the same answer as I was about to submit! =) May I offer you the demo I was working on: JS Fiddle. – Morna

I seriously don't get how I went from +1 to -2 to 0 to +2 in 5 minutes O_o – Erle

@David Thomas Whoa! Awesome demo! (might be a bit overkill) but still very nicely done! – Erle

Well, for what it's worth the down-votes appear to have been revoked...leaving only two up-votes... – Morna

@David Thomas lol weirdest voting on an answer I've ever received XD – Erle

If it's worth doing, it's worth over-doing! =) – Morna

I dream to understand why the hell so many people are on this site just to be downvoting without explanation. – Quartzite

Answer 2

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;
}

Quartzite

Ok great, thanks. I have HTML like this: <div id="container"><img ...></div> so the second method is the one that applies. Making it the background might be a bit more concise but that would be pretty hard given that it's a Drupal View – Katabasis

Answer 3

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

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

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

Minefield