Как сделать так, чтобы изображение начиналось с нижней части контейнера?

Question

У меня высокое изображение внутри короткого контейнера с overflow: hidden;.Нижняя часть изображения обрезана.Как сделать так, чтобы верх обрезался вместо дна?

Answer 1

дать контейнеру следующую css:

position:relative;

и изображение следующего css:

position:absolute;
bottom:0px;

P.S.
Очень хорошие (и четкие) иллюстрации между прочим

Answer 2

Если ваше изображение - это просто background-image контейнера, выполните следующие действия:

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

В противном случае поместите элемент img в нижнюю часть контейнера, как предложил @Joseph:

#container {
    position:relative;
}

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

Answer 3

Если контейнер имеет высоту 300px, например, это работает:

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

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