修复图像位置

Question

我对此知之甚少，因此我可能会挣扎。

我正在尝试使用以下代码添加将链接到bio中的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最大化时才能使用。如果我使用不同的计算机或使窗口变小等，则图像不会保持在固定位置，而是移动到页面上的随机位置。

我怎样才能解决这个问题？

提前致谢

Answer 1

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

您可以通过运行代码段来测试我的代码，使其全屏显示并播放屏幕大小。图像将始终保持在中心。您可以再次调整值以根据需要调整位置。希望这可以帮助！

.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>

Answer 2

你尝试％变化高度：50％和宽度：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 3

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

例

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