如何使图像从容器底部开始？答案

【问题标题】：How do I make an image start at the bottom of it's container?如何使图像从容器底部开始？
【发布时间】：2011-08-22 23:51:17
【问题描述】：

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

【问题讨论】：

【解决方案1】：

给容器以下css：

position:relative;

图片如下css：

position:absolute;
bottom:0px;

附：
非常漂亮（清晰）的插图顺便说一句

【讨论】：

【解决方案2】：

如果你的图片只是容器的background-image，这样做：

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

否则，将img 元素定位到容器底部，就像@Joseph 建议的那样：

#container {
    position:relative;
}

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

【讨论】：

好的，谢谢。我有这样的 HTML：<div id="container"><img ...></div> 所以第二种方法是适用的。将其作为背景可能会更简洁一些，但鉴于它是 Drupal 视图，这将非常困难

【解决方案3】：

例如，如果容器的高度为 300 像素，则此方法有效：

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

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

【讨论】：