0

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

该图像具有以下 css ：

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

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

我需要找到一种方法来做到这一点

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

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

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

再次，对不起我的英语，谢谢你的提示！

4

2 回答 2

3

您可以使用bottomCSS 属性而不是top. 例如，您的 CSS 可能看起来像这样：

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

将绝对定位与该bottom属性结合使用将允许您将图像的底部固定到最近的相对定位元素——在本例中为包含 div。

于 2013-07-03T02:28:38.717 回答
0

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

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

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

如果我完全没有掌握您要达到的目标，请纠正我。

于 2013-07-12T02:02:29.187 回答