如何从容器底部开始生成图像？

Question

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

Answer 1

给容器提供以下css：

position:relative;

和图片如下css：

position:absolute;
bottom:0px;

P.S。
非常好（和清晰）插图btw

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