[英]CSS/HTML make text stay the same position relative to an image resizing?
How do I make it so that when the image resizes, the text stays in the same position relative to the image when it resizes. 如何进行此操作以便在图像调整大小时,文本在调整大小时保持与图像相同的位置。 Here is what is happening currently: 以下是目前正在发生的事情:
Full screen view: 全屏视图:
Resized: 调整大小:
The text does not stay in the same place when the image went smaller, How do I make the text stay in the same place (under the line that points to it) when the image resizes? 当图像变小时,文本不会停留在同一个位置。当图像调整大小时,如何使文本保持在同一位置(指向它的线下)?
Relevant code: HTML: 相关代码:HTML:
<div id="BG1">
<div id="BG2">
<div id="slide1">
<p1>Choose<br>
your<br>
Route</p1>
<p2 id="Tongariro">Tongariro</p2>
<img src="img/NZ6.png" id="NZi2" >
</div>
</div>
</div>
CSS: CSS:
* {
margin:0;
padding: 0;
}
slide1, #slide2{ width: 100%; }
#slide1{
height: 600px;
margin: 0;
padding: 200px 0 260px 0;
}
#BG1{
background: url("../img/IMG_3708.jpg");
background-size: cover;
}
#BG2{
background-color: rgba(103, 128, 159,0.79);
}
#Tongariro{
position: relative;
top:27%;
left:34%;
font-size:40px;
}
#NZi{
width:35%;
display:block;
clear:both;
margin: 0;
position: absolute;
z-index: 0;
top: 55%;
left: 60%;
transform: translate(-50%, -50%) ;
}
You're defining the distance by px
- that means, even if the window resizes, the distance stays the same - it's a fixed number of pixels, thus not relative to the window size. 您通过px
定义距离 - 这意味着,即使窗口调整大小,距离也保持不变 - 它是固定数量的像素,因此与窗口大小无关。
A better unit would be %
- ie, 一个更好的单位是%
- 即,
#slide1
{
height: 30%;
margin: 0;
padding: 10% 0% 12% 0%;
}
This way, the distance will be relative to the screen size, and if you adjust the numbers correctly, everything will stay in the position you want it to - window full, or resized. 这样,距离将相对于屏幕尺寸,如果您正确调整数字,一切都将保持在您想要的位置 - 窗口已满或调整大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.