调整浏览器页面大小时，图片在同一位置答案

【问题标题】：Picture on the same location, when resizing of browser page调整浏览器页面大小时，图片在同一位置
【发布时间】：2020-03-27 19:53:07
【问题描述】：

Half page browser Full page browser

嗨，需要你们帮助我的程序。当我使用全屏浏览器时，如何将我的机器人放置在与“半页浏览器”相同的位置。当我打开全屏浏览器时，机器人的位置移动了。

请指导我。

下面是我的网页编码：

    <html>
      <head>
          <meta charset="utf-8">
          <title></title>
         <style>

              body {
                height: 100%;
                width: 100%;
                background-image: url('TPHRG floorplan1.png');
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size:   contain;

                }

            </style>

              <body>

                <img id="robot" style="position: fixed;  top:200px; left:450px; border-radius: 50%; width:50px; height:60px" src="pic_8.PNG">

                <?php



                 ?>

              </body>

    </html>

【问题讨论】：

不要使用固定像素，使用相对单位，如 %。

标签： html css web

【解决方案1】：

机器人图像的位置应该是百分比。

例如：

#robot{top:20%;left:30%}

【讨论】：

【解决方案2】：

你可以这样实现。

background-attachment: fixed;
background-size: contain;

去掉上面的 CSS 并在下面添加

background-size: cover;

希望这会对你有所帮助。

PS：在整页模式下查看

#robot {
  position: fixed;
  top: 200px;
  left: 450px;
  border-radius: 50%;
  width: 50px;
  height: 60px;
  border: 1px solid #000;
}

body {
  height: 100%;
  width: 100%;
  background-image: url(https://via.placeholder.com/1320x500.png);
  background-repeat: no-repeat;
  background-size: cover;
}

<html>

<head>
  <meta charset="utf-8">
  <title></title>

  <body>
    <img id="robot" src="https://via.placeholder.com/100x100.png">
  </body>

</html>

【讨论】：