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

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

html css image

Html 在CSS中设置块内图像的相对位置,html,css,image,position,Html,Css,Image,Position,我在一个块中有一个元素。区块高度为500px，宽度为屏幕的100%。在这个配置中，我知道我可以看到原始高度的500px（因为我在css文件中设置了overflow:hidden属性）该图像具有以下css： position: absolute; top: 0; left: 0; 如何在我的top属性中设置100%来查看没有JavaScript的图像底部？我为我的英语感到抱歉。这是一幅帮助您理解以下内容的图像：我需要知道在CSS/HTML中是否有这样做的方法。在此之前，我使用了backg

我在一个块中有一个元素。区块高度为500px，宽度为屏幕的100%。在这个配置中，我知道我可以看到原始高度的500px（因为我在css文件中设置了overflow:hidden属性）

该图像具有以下css：

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

如何在我的top属性中设置100%来查看没有JavaScript的图像底部？我为我的英语感到抱歉。这是一幅帮助您理解以下内容的图像：

我需要知道在CSS/HTML中是否有这样做的方法。在此之前，我使用了backgroundposition属性，但为了优化我的站点的性能，我切换到了这个属性（在我的例子中，是backgroundmaketoorepaint事件）。另外，我害怕使用JavaScript来获得像素的相对位置，因为我的设计是一个流动的设计（100%的窗口），并且样式重新计算会降低页面的性能

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

更新事实上，

底部：100%

将图像设置为父级高度的100%。但是如何将图像设置为

-100%

以获得图像的边缘

再次为我的英语道歉，谢谢你的提示

您可以使用

bottom

CSS属性而不是

top

。例如，您的CSS可能如下所示：

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

将绝对定位与

bottom

属性结合使用将允许您将图像的底部固定到最近的相对定位元素——在这种情况下，包含的div.

您可以使用

bottom

CSS属性，而不是

top

。例如，您的CSS可能如下所示：

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

将绝对定位与

bottom

属性结合使用将允许您将图像的底部固定到最近的相对定位元素——在本例中，从您的问题和注释中选择包含div.

，这会让您完全混淆您想要实现的目标。然而，似乎您正在尝试在某个特定时间显示图像的顶部或底部（您不清楚确切的时间或方式，但这可能并不真正相关）

我已经制作了一个图片，当它没有悬停时，图片在顶部，当它悬停时，图片在底部。这更多的是为了说明您需要避免使用其中一个或另一个的任何百分比，因为这些百分比将无法正常工作，因为您的图像会根据窗口宽度不断更改大小（因此移动它的百分比将始终更改）

然而，答案的本质与你所贴的内容相似，但你没有掌握如果您想要顶部显示，请设置
top:0
，如果您想要底部显示，请设置
bottom:0
如果您要在它们之间进行切换（就像我的小提琴一样），则需要将相反的设置为

auto

，这样它才能工作

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

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

auto

，这样它才能工作

如果我还没有完全理解您想要实现的目标，请纠正我。

您好，谢谢您的回答！这是可行的，但很奇怪，我需要设置

bottom:12.3%

来查看图像的底部，设置

bottom:-87.8%

来获取顶部。父元素只有一个

height

属性设置为

500px

，我有一些分辨率不同的图片，我需要设置

bottom:-121%

以获得图像的顶部。您必须将容器的位置设置为相对，将图像定位设置为绝对，以获得所需的效果：这解决了溢出问题，现在

bottom:0%

工作正常，谢谢！但如果我将

设置为底部：-100%

这将不起作用。这不是图像的绝对顶部。实际上更新，

bottom:100%