如何将图像设置为在放大和缩小时保持原位?

Question

在此处输入图像描述我遇到了这个问题，当我缩小和放大时，我网站上的图像正在移动到屏幕右侧。如何在屏幕上保持静止？

这是图像的 CSS 代码...

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

Answer 1

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

Answer 2

使用视口百分比长度单位而不是像素。

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

像这样：

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

Answer 3

这对我有用：

background-position: top; /* or center */