浏览器宽度调整大小的垂直对齐问题答案

【问题标题】：Vertical alignment issue on browser width resize浏览器宽度调整大小的垂直对齐问题
【发布时间】：2017-12-01 07:58:03
【问题描述】：

我有一个网页，上面放置了一张图片。出于愚蠢的想法，放置图像的网页是一个非常长的垂直页面（4000px）。

我放置的图像是一个从城市背景中冲出的机器人，我可以将鼠标悬停在它上面，然后它就会消失在视野中。我一直在测试不同的浏览器等和 Firefox 移动/平板电脑比例视图等，它引起了我的注意一些问题。

我已经稳定了网页中的所有其他图像，但 1. 机器人：由于某种原因，它在调整大小时不会停留在一个地方。当我移动窗口的宽度比例时，机器人会缩小（根据需要），但也会从其原始位置放大或缩小。

我一直在尝试解决它，无论采用何种解决方案，机器人都不会停留在同一个地方并调整大小。由于调整大小，它将始终从其原始位置向上或向下移动。我也不能有 100% 的图像，因为它对于图片来说太大了。

因为它是一个 4000px 的垂直屏幕，所以无论我如何调整原始图像的大小，它总是会拉伸以适应 4000px。

所以我有点卡住了。这是一个小代码，看看是否有人可以调整它以使机器人适合。

 <style type="text/css">

.container{
    width:100%;
    hieght:100%;
    top:0%;
    left:0%;

    margin: 0;
    padding: 0;
    text-decoration: none;
    };
</style>


<style type="text/css">
    .bakimg{

  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;

}
</style>


  <style type= "text/css">

  #rob{


  position:absolute;
  top:40%;
  left:54.5%;
    width:45%; 
  height: 45%;   
  };

  </style>


  <style type= "text/css">

.robofade {

  -webkit-opacity: 0.1;
  -moz-opacity: 0.1;
  opacity: 0.1;
  -webkit-transition: opacity 3s;
}

.robofade:hover {


  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-transition: opacity 3s;
}
</style>  




       <script type="text/javascript" src="sound-mouseover.js"></script>

</head>



<body> 

<Div class="container">



   <img class="bakimg" src="webapp1b2.png";>


   <img id="rob" class="robofade" src="robot1a.png";> 


   <embed  src="menulista.html" style="position:fixed; top:0%;left:8.0%; width:100%; height:10%; z-index:100000;">


   <img id="bakbar" src="backbar.png" style="position:fixed; top:0%; left:0%;width:100%; hieght:100%; z-index:9999;">

  <img id="txt" src="linkmywebsitelogotext.png" style="position:fixed; top:1%; left:5%; width:90%; hieght:90%; z-index:9999;">


  <!---<img name="slidetext1" class="fadeout" src="menuslide1.png" style="position:absolute; top:100%; left:26%; width:60%; hieght:100%;">--->


  </div>


  <!--  <img name="glowtxt" class="fadeout" src="glowtext.png" style="position:fixed; left:0.05%; top:90%;  z-index:99999;">-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<body>

我假设问题是由于大的垂直图像（4000px）导致尺寸差异不同步......

我可以对角移动窗口大小并且图像保持在正确的位置，但是因为大的垂直背景。当我仅调整图像的宽度时 - 我得到了位置问题...提前感谢您的任何建议。

http://jsfiddle.net/MgcDU/7239/

喜欢这个小提琴，但在 4000 像素的背景图像上必须有 40% 大小的图像...棘手。 40% 的图像不会保持原样......我不能去 100% 或者图像太大......

【问题讨论】：

标签： html image resize jscript

【解决方案1】：

我整理了一下，对于相同位置的人来说，确实很容易解决...见代码...

<!----responsive elements (images on images---->       
       <style>

       .wrapper{
  display: inline-block;
  position:relative;
  }

        .bg {
      width: 100%;
  max-width: 100%;


        }

        .simg{  

  position:absolute;
  right: 15.3%;
  top: 3.5%;
  height:16%;
  width: 40%;
  max-width:65%;

  opacity: 0.1

  }

  .slidetxt1{  

  position:absolute;
  right: 20%;
  top: 28%;
  width: 60%;
  max-width:60%;
  opacity: 0.1



}

    </style>

</head>


<body> 


<div class="wrapper";>
<img class="bg" src="webapp1b2.png";>
<img id="slide" class="simg" src="robot1.png"; onmouseover="enlarge2()"; onmouseout="delarge2()";> 
<img id="simg" class="slidetxt1" src="menuslide1.png" onmouseover="enlarge()"; onmouseout="delarge()";>
 <div>

 <!--------------------->


   <embed  src="menulista.html" style="position:fixed; top:0%;left:8.0%; width:100%; height:10%; z-index:100000;">


   <img id="bakbar" src="backbar.png" style="position:fixed; top:0%; left:0%;width:100%; hieght:100%; z-index:9999;">

  <img id="txt" class="spinx" src="linkmywebsitelogotext.png" style="position:fixed; top:1%; left:5%; width:90%; hieght:90%; z-index:9999;">



  <!--  <img name="glowtxt" class="fadeout" src="glowtext.png" style="position:fixed; left:0.05%; top:90%;  z-index:99999;">-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<body>

【讨论】：