瀏覽器寬度調整時的垂直對齊問題
[英]Vertical alignment issue on browser width resize
問題描述
我有一個網頁，上面放有一個圖像。 由於愚蠢的想法原因，放置圖像的網頁是一個非常長的垂直頁面（4000像素）。
我放置的圖像是一個機器人從城市背景中充電，我可以將鼠標懸停在它上面，它會逐漸消失。 我一直在測試不同的瀏覽器等和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/
喜歡這個小提琴，但是在4000px的背景圖像上必須有40％的圖像......整蠱。 40％的圖像不會留下來...而且我不能100％或圖像太大....
1 個解決方案
解決方案1
0 2017-06-28 12:37:29
我對它進行了排序，對於那些處於相同位置的人來說，它確實是一個簡單的修復...請參閱代碼......
<!----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>
調整瀏覽器寬度時導航欄響應問題？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.