4

在我的介绍页面中，我有一个非常大的高度和宽度图像以适应所有分辨率（宽度超过 4000 像素），我将其设置如下：

#source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

然后，我使用这些样式属性在该图像上添加了一些文本：

.description {
    position:absolute;
    top:510px;  
    left:23px;
    width:340px
}

它在我的 15.6 英寸笔记本电脑上（分辨率为 1366x768）看起来很正常（我希望它显示出来）。

在此处输入图像描述

然而，当我的室友在他的高分辨率显示器上看到它时，描述并不在“正确”的位置。当然，我理解为什么会这样。

在此处输入图像描述

我的问题是如何在所有分辨率中动态保持描述文本的正确位置？非常感谢。

4

3 回答 3

3

设置与底部的距离，而不是与顶部的距离。或将其设置为 %。

编辑：我已经将我的一个实验改编成一个例子：http ://dabblet.com/gist/2787061 描述的位置是相对于图像容器的bottom和设置left的（图像填充了它的整个容器） .

在第一种情况下，到图像容器的距离left和距离bottom是固定的，以 px 为单位。

在第二种情况下，它们以 % 为单位，并在调整浏览器窗口大小时发生变化。

基本上，成功的规则是

figcaption {
    bottom: 5px;
    left: 23px;
        /* more rules here */
}

在第一种情况下（固定距离，以 px 为单位）和

figcaption.perc {
    left: 10%;
    bottom: 17%;
}

在第二种情况下（百分比）。

另外，请注意您不需要position: absolute或设置图像的top和left属性。但是，您确实需要position:relative在描述框的父级上进行设置。

要使图像水平填充屏幕，您需要在 body 元素和figure元素上具有margin:0;和。我编辑了我的示例以反映这些更改http://dabblet.com/gist/2787061padding:0;width: 100%;margin: 0;

要使图像水平和垂直填充屏幕，最简单的方法是甚至不使用 img 标签，而只需将图像设置为 body 的背景图像，并将 html 和 body 元素的高度都设置为 100 % - 示例http://dabblet.com/gist/2792929

请注意两个原因：第一，这会真正扭曲图像，并且在调整浏览器窗口大小时会使其看起来很难看；第二，如果您需要图像下方的一些内容，则需要提供外部元素position: absolute并设置其top: 100%. 这两个方面都可以在我链接到的示例中看到。如果不需要，您可以简单地删除图像下方的内容。

于 2012-05-25T09:47:27.417 回答
1

用于position:relative;包装图像的 div 和position:absolute;文本 div

于 2012-05-25T09:47:14.947 回答
0

请设置百分比

检查设置在水平中心的示例描述框，

首先设置相对于包装器 div 的位置

.description {
    position:absolute;
    top:510px;  
    left:50%;
    width:340px;
    margin:0 0 0 -170px
}
于 2012-05-25T09:53:02.427 回答