浏览器缩放时图片移动答案

【问题标题】：Picture moves when browser zooms浏览器缩放时图片移动
【发布时间】：2013-09-15 18:41:22
【问题描述】：

我是 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;
}

【问题讨论】：

人们几乎不使用浏览器缩放。你为什么要使用它？您可能应该发布您的代码或制作一个 JSFiddle。这似乎是一个容易解决的问题。如果您将图像的父级设置为position: relative，并将图像设置为position: absolute; bottom: 0;，那应该会有所帮助。但如果不先查看您的代码就不确定。
我已经添加了代码。它现在适用于缩放，但图像不再完全位于中心，而是更靠右。我怎样才能解决这个问题？感谢您的快速回复！编辑：我自己修复了最后一部分，在图像上添加：位置：绝对；底部：0；左：50vh;

标签： html css image browser zooming

【解决方案1】：

如果您想将对象粘贴到某处，可以使用绝对定位！如果您想使用绝对定位将对象放置在父 div 中的某个固定位置，您的父 div 本身应该有某种位置（固定、相对、绝对）（否则绝对定位将从 @987654323 @元素！！！）

所以，总而言之，您应该使用position:relative 作为您的Page1 div，然后使用position:absolute;bottom:0; 作为其中包含您的图像的div！

【讨论】：