我正在为客户建立一个网站,当我将窗口屏幕移动到不同的大小时,我正在努力处理一些移动位置的图像。我希望这些图像能够保持原样。
这是代码。 **指的是正在移动的图片
HTML
<div id="header">
**<div id="pics">
<img id ="jaytext" src="newImages/jaycousins.png">**
<img id="papa" src="newImages/papaPic.jpg">
**<img id ="darkTextBackground" src="newImages/darktextbackgroubd.jpg">**
**<img id ="commercialtext" src="newImages/commercialtext.png">**
<img id ="leftsidebackground" src="newImages/leftsidebackground.jpg">
</div>
CSS
body {
background: url(../newImages/headerBackground.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
//font-size: 14px;
margin: 0;
padding: 0;
min-height: 800px;
max-height: 800px;
min-width: 1280px;
max-width: 1289px;
}
#header {
background: url(../images/bg-header.png) repeat-x bottom center;
margin: 0;
text-align: center;
display: block;
height:290px; //height for adjust picture
}
#papa {
display: block;
margin: 0 auto;
width: 430px;
margin-left:0px;
height:270px;
}
#jaytext{
width:470px;
height:110px;
margin: 0 auto;
display:block;
position: absolute;
top:5.5%;
left:31.5%;
}
#darkTextBackground{
margin: 0 auto;
width:550px;
height:73px;
position:absolute;
top:24.2%;
left:31.8%;
}
#commercialtext{
margin: 0 auto;
height:53px;
width:505px;
position:absolute;
top:23.7%;
left:31.70%;
}
#leftsidebackground{
display: block;
margin: 0 auto;
width:300px;
height:500px;
position:relative;
left:-40%;
}
我认为在体内添加min / max-width min / max-height会修复它......
答案 0 :(得分:1)
#header{
position:relative;/*or absolute*/
}
or
#pics{
position:relative;/*or absolute*/
}
would help you!
运动图像的'position'设置为'absolute'。这会导致你的问题。'绝对'元素的位置由它的'包含块'决定。 “绝对”元素的“包含块”是最接近的“定位”祖先,这意味着祖先将“位置”设置为“相对或绝对或固定”但不是“stacitc”。 reference on containing block