gpt4 book ai didi

html - 浏览器缩放时图片移动

转载 作者:行者123 更新时间:2023-11-28 18:10:14 24 4
gpt4 key购买 nike

我是 HTML 和 CSS 的新手,也是这个论坛的新手。我在使用浏览器缩放功能时遇到了一些问题。我想在我的 DIV 底部贴一张图片,就像我在这张照片中给你看的那样。 http://imageshack.us/a/img29/1417/n81h.png

但是当我使用浏览器缩放时,图像移动并且不再与 DIV 的底部对齐,如下所示: http://imageshack.us/a/img14/221/vrqd.png

我该怎么办?我搜索了很多但找不到明确的答案。谢谢!

<head>
<title>Portfolio</title>
<link href="MyStyle.css" rel="stylesheet" type="text/css" />
</head>

<body style="background:#81DAF5">
<div>
<div ID="Page1">
Welcome at my portfolio
<div ID="Creative">Being creative is being me</div>
<div><img id="head" src="head2.png"/></div>
</div>
<div ID="Page2">Random Text 2 :)</div>
<div ID="Page3">Random Text 3 :)</div>
</div>
</body>
}

#Page1{
font-family:Cartoon;
font-size:100px;
text-align:center;
background-color:#D8D0F4;
width:80%;
height:80vh;
border-radius:60px;
margin: 10vh auto 10vh auto;
border: 10px solid #FFE1E1;

}


#Page2{
font-family:Cartoon;
font-size:30px;
text-align:center;
background-color:#D8D0F4;
width:80%;
height:80vh;
border-radius:60px;
margin: 20vh auto 10vh auto;
border: 10px solid #FFE1E1;
}

#Page3{
font-family:Cartoon;
font-size:30px;
text-align:center;
background-color:#D8D0F4;
width:80%;
height:80vh;
border-radius:60px;
margin: 20vh auto 0vh auto;
border: 10px solid #FFE1E1;
}

#Creative{
font-family:cartoon;
font-size:50px;
}

最佳答案

如果你想把你的对象固定在某个地方,你可以使用绝对定位!如果你想使用绝对定位将对象放置在父级 div 中固定的某个位置,你的父级 div 应该有自己的某种位置(固定,相对,绝对)(否则绝对定位将从 body 元素开始!!!)

所以,总而言之,你应该为你的 Page1 div 使用 position:relative 然后使用 position:absolute;bottom :0; 用于包含您的图片的 div!

关于html - 浏览器缩放时图片移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18816083/

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