固定图像位置

Question

我对这方面的了解有限，因此我可能很挣扎。

我正在尝试使用以下代码将 link 添加到个人简介中的 Twitter 帐户的图像：

<a href="https://twitter.com/UserName" target="_blank">
<img style="position:absolute;left:33.75%;bottom:-71.5%; width:65px; height:65px;" 
src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>

这非常有效，但前提是我的显示器上的 Chrome 已最大化。如果我使用另一台计算机或将 window 变小等，图像不会停留在固定位置，而是会移动到页面上的随机位置。

我该如何解决这个问题？

提前致谢

Answer 1

你试试% 更改 height:50% 和 width:50% <a href="https://twitter.com/UserName" target="_blank"> <img style="position:absolute;left:33.75%;bottom:-71.5%; width:50%; height:50%" src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>

Answer 2

这意味着它没有响应。尝试为图像添加媒体查询

示例

@media only screen and (max-width: 600px) {
  img{
    width:50%
     height: 50%
  }
}

Answer 3

使用下面的代码片段，无论屏幕大小如何，图像都将在屏幕上水平和垂直居中。你可以用下面的 CSS 来定位图像。使用此设置，无论您将图像放置在何处，它都应该 mostly 在该位置，无论屏幕大小如何。

您可以通过运行代码段测试我的代码，使其全屏显示并调整屏幕大小。图像将始终位于中心。同样，您可以调整值以根据需要调整位置。希望这对您有所帮助！

.wrapper {
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.wrapper img {
  width: 65px;
  height: auto; /* Or 65px, whatever you need it to be. */
  position: absolute;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* This will place it in the middle */
}

<div class='wrapper'>
  <a href="https://twitter.com/UserName" target="_blank">
  <img src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>
</div>

固定图像位置

Fix Image Position

html

css

image

position

fixed