设置CSS中块内图像的相对位置

Question

我在块中有一个元素。块高度为500px，宽度为屏幕的100％。在这个配置中，我知道我可以看到500px的原始高度（因为我在css文件中设置了溢出：隐藏属性）。

图片有以下css：

position: absolute;
top: 0;
left: 0;

如何在我的top属性中设置100％以在没有JavaScript的情况下查看图像的底部？ 我很抱歉我的英语。这是一张图片，可以帮助您理解：

我需要知道是否有办法在CSS / HTML中执行此操作。在此之前，我使用了background-position属性，但我切换到这个以优化我的网站的性能（在我的情况下，背景make too repaint事件）。此外，我害怕使用JavaScript来获得像素的相对位置，因为我的设计是流畅的设计（100％的窗口），并且样式重新计算会降低页面的性能。

请注意，图像不是静态的。 （我的网站的所有页面中的图像都不同，并且分辨率不同。）

更新实际上，bottom:100%将图片设置为父高度的100％。但是如何将图像设置为-100%以获得图像的边缘？

再次，抱歉我的英文，谢谢你的提示！

Answer 1

您可以使用bottom CSS属性而不是top。例如，您的CSS可能会这样：

#imageContainer {
    position: relative;
    overflow: hidden;
    height: 100px;
}
#imageContainer > img {
    position: absolute;
    bottom: 0;
    left: 0;
}

将绝对定位与bottom属性结合使用，可以将图像的底部固定到最近的相对定位元素 - 在本例中为包含div。

Answer 2

从你的问题和评论中，你正在努力实现的目标相当混乱。但是，似乎您试图在某个特定时间显示图像的顶部或底部（您不清楚何时或如何，但这可能并不真正相关）。

我制作了this fiddle，在没有悬停的情况下，图像位于顶部，在悬停时位于底部。这更多的是为了证明你需要避免其中一个或那个的任何百分比，因为那些将无法正常工作因为你的图像根据窗口宽度不断改变大小（所以移动它的百分比永远都会改变。

然而，答案的本质与cm2发布的相似，但你还没有掌握。 如果您想要显示顶部，请设置top: 0，如果您想要显示底部，请设置bottom: 0。如果您以某种方式在它们之间切换（就像我的小提琴那样），那么你需要将相反的一个设置为auto才能使它工作。

如果我完全没有理解你想要达到的目标，请纠正我。