Fit an image in a div
I am trying to fit an image into my div,this is the div.
#Div3 {
margin-left: 0px;
margin-top: 0px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #906;
width: 960px;
padding-top: 0px;
height: 202px;
}
html > body # Div3 {
height: auto;
min-height: 203px;
}
The image css is as follows.
/* rotator in-page placement */
div.rotator {
position: relative;
width: 960px;
height: 202px;
margin-left: 15px;
display: none;
} /* rotator css */
div.rotator ul li {
float: center;
position: absolute;
list-style: none;
}
div.rotator ul li.show {
z-index: 500
}
On my html page i have this.
<div id="开发者_运维技巧Div3" class="rotator">
<ul>
<li class="show"><a href="#link1"><img src="./first.jpg" width="960" height="202" alt="pic1" /></a></li>
<li><a href="#link2"><img src="./second.jpg" width="960" height="202" alt="pic2" /></a></li>
<li><a href="#link3"><img src="./third.jpg" width="960" height="202" alt="pic3" /></a></li>
<li><a href="#link4"><img src="./fifth.jpg" width="960" height="202" alt="pic4" /></a></li>
</ul>
</div>
The result is that the image displays but do not fit perfectly into the div as i would have wanted.What could be the problem?.
First of all I think you need to reset the standard margins / paddings:
li, ul {
margin: 0;
padding: 0;
}
Second I don´t think your positioning is correct, float:center
does not exist and you don´t float anyway when you use absolute
positioning.
It also might help to add a specific position:
div.rotator ul li {
position: absolute;
list-style: none;
top: 0;
left: 0;
}
Oh, and list-style
has no spaces in it...
Expand your div by 1px in each direction.
div.rotator ul li {
height:202px;
}
精彩评论