Question

我已经更新了这篇文章，因为我似乎面临着这个图像问题的新问题，基本上，我需要将图像集中在所有设备上。

以下是图片的HTML，所有图片都必须像自定义菜单一样保留。

body {  font-family: 'Roboto', sans-serif; background-color:#2d2d2d; color: #f5f5f5; margin: 0 auto; padding:0; font-size:12pt; padding-top:20px; padding-bottom:20px; }
}

#box2 {
display:block;
     margin:auto;
     height:500px; /*change ## to the pixel setting of your image*/
     width:500px;/*change ## to the pixel setting of your image*/
}

@media screen and (max-width: 768px) {

body { padding:0; background-image: none !important; }


}

<?php
/*
Template Name: Page Menu
*/
 ?>



<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<style>
body {background-color:black}
</style>

<div id="body">
<div id="box2" "style="position: absolute">
<a href=""><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/111.png" width="500" align="middle"  style="position: absolute; top: 100px; left: 500px; "/>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65"  style="position: absolute; border: 0px solid white; top: 240px; left: 530px; "/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid blue; top: 170px; left: 785px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid green; top: 140px; left: 650px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid red; top: 280px; left: 890px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid purple; top: 435px; left: 565px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width=65" style="position: absolute;  border: 0px solid grey; top: 435px; left: 820px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid yellow; top: 325px; left: 690px;"/></a>
</div>
</div>

我只需要将主图像集中在所有设备上，基本上只是在100％屏幕宽度的中间，发现很难这样做，不知道为什么

Answer 1

好的，我不得不改变一些东西。图像比你可能需要重新调整大一些，但现在保持原状。

<!doctype html>
<html>
<style>
body {
background-color: black;
}

img {
    position: absolute;
}
</style>
<body>
<div class="navigation">
<div "style="position: relative">
<a href="http://tridentas.co.uk/bowwownow">
<img  src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-  content/uploads/2015/10/home1.png" style: "width= 65; border: 0px solid white;   top: 22%; left: 42%;"/></a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" style= "width= 65; border: 0px solid blue; top: 170px; left: 715px;"/></a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" style= "width= 65; border: 0px solid green; top: 230px; left: 460px;"/></a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" style= "width= 65; border: 0px solid red; top: 260px; left: 825px;"/></a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" style= "width= 65; border: 0px solid purple; top: 405px; left: 490px;"/></a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" style= "width= 65; border: 0px solid grey; top: 405px; left: 760px;" />
</a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid yellow; top: 305px; left: 625px;" />
</a>
</div>


</div>
</body>
</html>

当浏览器重新调整大小时img移动

1 个答案: