瀏覽器寬度調整大小的垂直對齊問題

我有一個圖像放在它上面的網頁。由於愚蠢的想法原因，圖像被放置到的網頁是非常長的垂直頁面（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

瀏覽器寬度調整大小的垂直對齊問題

回答

相關問題