Question

我对此的知识有限，因此为什么我可能还在挣扎。

我正在尝试使用以下代码添加图片，该图片将链接到生物中的推特帐户：

<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

您尝试％更改高度：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 2

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

示例

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

Answer 3

使用下面的代码段，无论屏幕大小如何，图像都将在屏幕上水平和垂直居中。您可以使用下面的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>

固定图像位置

3 个答案: