浏览器缩放时图片移动

时间:2013-09-15 18:41:22

标签: html css image browser zoom

我是HTML和CSS的新手,也是这个论坛的新手。我在浏览器缩放功能方面遇到了一些麻烦。我想把图像粘贴到我的DIV的bottem上,就像我在这张照片中给你看的那样。 http://imageshack.us/a/img29/1417/n81h.png

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

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

<head>
    <title>Marco Maissan - 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;
}

1 个答案:

答案 0 :(得分:0)

如果你想把你的物体贴在某处,你可以使用绝对定位! 如果你想使用绝对定位将一个对象放在父div中固定的某个位置,你的父div应该有一些位置(固定,相对,绝对)(否则绝对定位会发生)来自body元素!!!)

因此,总而言之,您应该使用position:relative代表Page1 div,然后将position:absolute;bottom:0;用于包含您图片的div