CSS/HTML 使文本相对于图像大小保持不变？

Posted 2023-03-06

【中文标题】CSS/HTML 使文本相对于图像大小保持不变？

【英文标题】：CSS/HTML make text stay the same position relative to an image resizing?

【发布时间】：2015-11-09 04:00:43

【问题描述】：

如何做到这一点，以便在图像调整大小时，文本在调整大小时相对于图像保持在相同的位置。以下是目前正在发生的事情：

全屏视图：

调整大小：

当图像变小时，文本不会停留在同一个地方，当图像调整大小时，如何使文本保持在同一个位置（在指向它的线下）？

相关代码：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：

* 
    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%) ;
    

【问题讨论】：

如果文字需要随着时间的推移保持不变，您应该通过photoshop或任何图像编辑软件编辑图像并将此文字添加到您想要的位置。这样你就不需要编写任何额外的代码了。

@TarunMahashwari 我不同意这种方法，尽管它会起作用。原因是，这是一个q&d 临时掩饰——例如，如果他需要挤入更多文本，他可能需要调整图像大小——并且有足够的内容来调整大小，没有图像大小是有效的。

请阅读我之前评论的第一行。 如果文本需要随着时间的推移保持不变

【参考方案1】：

您通过px 定义距离 - 这意味着，即使窗口调整大小，距离也保持不变 - 它是固定数量的像素，因此与窗口大小无关。

更好的单位是% - 即，

#slide1

height: 30%;
margin: 0;
padding: 10% 0% 12% 0%;

这样，距离将与屏幕大小相关，如果您正确调整数字，所有内容都将保持在您想要的位置 - 窗口已满或调整大小。

Read more! :)

【讨论】：

意思是使用%比px好？

@FiidoFirdauz 并非总是如此。对他来说，在这种情况下，是的。看看我刚刚编辑的链接。

如果需要固定高度怎么办？

@user3459426 % 和 px 之间的混合是错误的，因为随着布局变得部分流动，它不适用于某些尺寸。你不能有一个流动的固定元素，这两个相互否定。它要么是固定的，要么是相对的。