[英]How to keep text over a huge image in proper position on all resolutions?
In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below: 在我的介绍页面中,我有一个非常大的高度和宽度图像,以适应所有分辨率(宽度超过4000像素),我将其设置如下:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties: 然后,我使用这些样式属性在该图像上添加了一些文本:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution. 它在我的15.6英寸笔记本电脑上看起来很正常(我想要它显示),分辨率为1366x768。
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. 然而,当我的室友在他的高分辨率显示器上看到它时,描述不在“正确”位置。 Of course, I understand why this is happening.
当然,我理解为什么会这样。
My question is how can I keep dynamically the proper position of the description text in all resolutions? 我的问题是如何在所有分辨率中动态保持描述文本的正确位置? Thank you very much.
非常感谢你。
Set the distance from the bottom, not from the top. 设置距离底部的距离,而不是从顶部的距离。 Or set it in %.
或者将其设置为%。
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). 编辑 :我已经将我的一个实验改编成了一个例子: http : //dabblet.com/gist/2787061描述的位置是相对于图像容器的
bottom
和left
设置的(图像填满了整个容器)。
In the first case, the distances to the left
and the bottom
of the image container are fixed, in px. 在第一种情况下,图像容器的
left
和bottom
的距离是固定的,以px为单位。
In the second case, they are in % and change on resizing the browser window. 在第二种情况下,它们以%表示,并在调整浏览器窗口大小时更改。
Basically, the rules that do the trick are 基本上,这个技巧的规则是
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and 在第一种情况下(固定距离,在px)和
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage). 在第二种情况下(百分比)。
Also, please note that you don't need position: absolute
or to set the top
and the left
properties for the image. 另请注意,您不需要
position: absolute
或设置图像的top
和left
属性。 However, you do need to set position:relative
on the parent of the description box. 但是,您需要在描述框的父级上设置
position:relative
。
For the image to fill the screen horizontally , you need to have margin:0;
要使图像水平填充屏幕,您需要有
margin:0;
and padding:0;
和
padding:0;
on the body element and width: 100%;
身体元素和
width: 100%;
and margin: 0;
和
margin: 0;
on the figure element. 在图元素上。 I've edited my example to reflect these changes http://dabblet.com/gist/2787061
我编辑了我的例子来反映这些变化http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically , the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929 要使图像水平和垂直填充屏幕,最简单的方法是不使用img标记,只需将图像设置为正文的背景图像,并将html和body元素的高度设置为100 % - 示例http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute
and set its top: 100%
. 小心有两个原因:第一,这会使图像失真,并且在调整浏览器窗口大小时会使其看起来很丑陋,如果你需要在图像下面有一些内容,你需要给出外部元素
position: absolute
和设置它的top: 100%
。 Both these two aspects can be seen in the example I've linked to. 这两个方面都可以在我链接到的示例中看到。 You can simply remove the content below the image if you don't need it.
如果您不需要,可以简单地删除图像下方的内容。
use position:relative;
使用
position:relative;
for the div that wraps the image, and position:absolute;
对于包裹图像的div,以及
position:absolute;
for the text div 为文本div
please set percentage 请设置百分比
check the example- description box set in horizontal center, 检查水平中心设置的示例 - 描述框,
first set position relative into wraper div 首先设置相对于包装div的位置
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.