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

我有一个图像放在它上面的网页。由于愚蠢的想法原因，图像被放置到的网页是非常长的垂直页面（4000px）。浏览器宽度调整大小的垂直对齐问题

我正在摆放的图像是一个机器人从城市背景中冲出来，我可以将它悬停在它上面，它会消失在视图中。我一直在测试不同的浏览器等，Firefox的手机/平板电脑的比例等，它引起了我的注意几个问题。

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

我一直在试图解决它，无论采用什么解决方案，机器人都不会停留在同一个地方并调整大小。由于调整大小，它总是会从原来的位置上移或下移。我也不能在100％的图像，因为它对于图片来说太大了。

由于它是一个4000像素的垂直屏幕，无论我如何调整原始图像的大小，它总是会伸展到适合4000像素。

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

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

这样的小提琴，但有是在4000px背景图像上40％的大小...整蛊一个图像。 40％的形象只是不会保持放... ...我不能走100％或图像太大....

来源

2017-06-28 russbaker2016

我对它排序，对于那些在相同的位置，它确实是一个简单的修复。 ..看代码...

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

来源

2017-06-28 12:37:29 russbaker2016

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

回答

相关问题