如何使图像从其容器的底部开始？

Question

我在一个带有 overflow:hidden; 的短容器内有一个高图像。图像的底部被切除。如何使顶部而不是底部被切断？

Answer 1

为容器提供以下 css：

position:relative;

为图像提供以下 css：

position:absolute;
bottom:0px;

PS
顺便说一句，插图非常好（而且清晰）

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