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

Question

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

图片有以下css：

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

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

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

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

UPDATE 实际上，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

从您的问题和 cmets 来看，您想要实现的目标确实令人困惑。但是，您似乎试图在某个特定时间显示图像的顶部或底部（您不清楚确切的时间或方式，但这可能并不相关）。

我制作了this fiddle，它的图像在未悬停时位于顶部，而在悬停时位于底部。这更多地表明您需要避免任何百分比，因为这些将无法正常工作因为您的图像会根据窗口宽度不断改变大小（因此要移动它的百分比总是在变化）。

答案的本质，不过和cm2贴的差不多，只是你没有掌握。 如果你想要顶部显示，设置top: 0，如果你想要底部显示，设置bottom: 0。如果你以某种方式在它们之间切换（就像我的小提琴那样），那么你需要将相反的设置为 auto 以使其工作。

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