放大和缩小时如何设置图像以保持原位？答案

【问题标题】：How Do I set the image to stay in place when I zoom in and zoom out?放大和缩小时如何设置图像以保持原位？
【发布时间】：2023-03-23 23:49:01
【问题描述】：

enter image description here我遇到了这个问题，当我缩小和放大时，我的网站上的图像移动到屏幕右侧。我怎样才能在屏幕上保持静止？

这是图片的 CSS 代码...

.logo {

    height: 150px;
    width: 150px;
    position: absolute; TOP: 60px; RIGHT: 230px;
    position: auto;
    display: block;
}

【问题讨论】：

【解决方案1】：

您正在指定图像需要远离右边框的像素量。将其替换为相对大小，例如 Right: 50%;，以便在调整大小或放大或缩小时，响应地重新计算与右边框的距离。

【讨论】：

【解决方案2】：

使用Viewport-percentage lengths 单位而不是像素。

视口百分比长度定义了 <length> 相对于文档可见部分的大小。

类似这样的：

.logo {
    height: 150px;
    width: 150px;
    position: absolute; 
    top: 5vh; 
    right: 15vw;
    display: block;
}

【讨论】：