Question

在我的内页上,我有一个非常大的高度和宽度图像,以适应所有分辨率(宽度超过4000px),我将其设置如下:

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

然后,我添加了一些文字上面的图像与这些样式属性:

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

在我的15.6英寸的笔记本电脑上,

""https://i.sstatic.net/BwwV4.png" alt="此处输入图像描述"/ >

然而,当我室友在他的高分辨率监视器上看到这个描述时,他并没有站在“正确”的位置上。当然,我理解为什么会发生这种情况。

""https://i.sstatic.net/Uxpky.png" alt="此处的内置图像描述"/ >

My question is how can I keep dynamically the proper position of the description text in all resolutions? Thank you very much.

Answer 1

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

EDIT: I ve adapted one of my experiments into an example: http://dabblet.com/gist/2787061 The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).

在第一种情况下,图像容器的left 和 bottom 之间的距离以px形式固定。

第二种情况是,它们位于%,在调整浏览器窗口的大小时发生变化。

基本上说来,玩花招的规矩是

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

在拳头框中(固定距离, px) 和

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

第二种情况(百分比)。

Also, please note that you don t need position: absolute or to set the top and the left properties for the image. However, you do need to set position:relative on the parent of the description box.

要填满屏幕 horizontally 图像,您需要具备以下图像: margin:0; 和 pading:0; 和 和 width:100%; 和 margin:0; 在图表元素上。我编辑了我的示例以反映这些变化: http://dabblet.com/gist/27929



要小心,原因有二:一,这会扭曲图像,在调整浏览器窗口大小时会使图像看起来丑陋,二,如果您需要图像下面的某些内容,您需要给外元素 < code> 定位: 绝对  并设置其 < code> 顶部: 100\\\ / code > 。这两个方面都可以在链接的示例中看到。如果您不需要,您只需删除图像下面的内容。

Answer 2

使用 < code> position: relal; 用于覆盖图像的 div 和 position: absolute; 用于文本 div

Answer 3

请设定百分比

检查水平中心设置的示例 - 描述框,

将第一个设置位置相对相对设置为折叠 Div

.description {
    position:absolute;
    top:510px;  
    left:50%;
    width:340px;
    margin:0 0 0 -170px
}

友情链接