顶部的图像溢出？

Question

我有一个我正在研究的网站，并试图让图像在顶部溢出并在底部对齐。

http://mytempsite.net/raven/

现在DIV的高度是500PX，当图像变大时，它的溢出隐藏在底部。问题是它使图像看起来很奇怪。我需要它的图像伸展因为我正在使网站响应，我知道的图像变得模糊，但这些只是临时图像。

我的问题是，是否有一种方法可以使图像的底部对齐并固定在DIV的底部，然后当它被拉伸得更大时，它会在页面顶部溢出，就像消极一样？

Answer 1

我认为你是在尝试显示图像的底部而不是顶部？如果是这种情况，请在选择器#myGallery img上将图像的位置更改为底部而不是顶部。

#myGallery img {
    display:none;
    position:absolute;
    bottom: 0;  // change this from top to bottom
    width: 100%;
    left:0;
}

Answer 2

我建议从DIV中移除高度，并从图像中移除位置：绝对值，因为无论大小如何，都需要图像的高度来定义DIV的高度。

在自适应幻灯片中，我开始使用以下CSS：

.slide {
  width: 100%;
  float: left;
  margin-right: -100%;
}

这允许你将它们堆叠在一起，就像绝对定位那样，但是DIV会响应幻灯片的高度。

尽管如此，你也会在底部出现白色淡入淡出，我认为这是你提出问题的部分原因 - 你希望在较小的视图上进行淡入淡出。

为此，img #fadeimage应该有position: absolute; bottom: 0; height: 100%，但你也可能需要建立你的图像，以便顶部有更多的空白空间。