gpt4 book ai didi

html - 调整浏览器页面大小时,同一位置的图片

转载 作者:行者123 更新时间:2023-11-28 12:28:20 25 4
gpt4 key购买 nike

Half page browser Full page browser

嗨,需要你们帮助我的程序。当我使用全屏浏览器时,如何将我的机器人放置在与“半页浏览器”相同的位置。当我打开全屏浏览器时,机器人的位置移动了。

请指导我。

下面是我的网页代码:

    <html>
<head>
<meta charset="utf-8">
<title></title>
<style>

body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;

}

</style>

<body>

<img id="robot" style="position: fixed; top:200px; left:450px; border-radius: 50%; width:50px; height:60px" src="pic_8.PNG">

<?php



?>

</body>

</html>

最佳答案

你可以这样实现。

background-attachment: fixed;
background-size: contain;

删除上面的CSS并添加下面

background-size: cover;

希望对您有所帮助。

PS:在全页模式下查看

#robot {
position: fixed;
top: 200px;
left: 450px;
border-radius: 50%;
width: 50px;
height: 60px;
border: 1px solid #000;
}

body {
height: 100%;
width: 100%;
background-image: url(https://via.placeholder.com/1320x500.png);
background-repeat: no-repeat;
background-size: cover;
}
<html>

<head>
<meta charset="utf-8">
<title></title>

<body>
<img id="robot" src="https://via.placeholder.com/100x100.png">
</body>

</html>

关于html - 调整浏览器页面大小时,同一位置的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59151839/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com