Solve the problem that the image is longer/wider than the container while the image is longer than the container.
In ff and ie
Here is the js Code:
Copy codeThe Code is as follows:
<HTML>
<HEAD>
<TITLE> script home www.jb51.net New Document </TITLE>
<Meta name = "Generator" CONTENT = "EditPlus">
<Meta name = "Author" CONTENT = "">
<Meta name = "Keywords" CONTENT = "">
<Meta name = "Description" CONTENT = "">
<Style type = "text/css">
* {Margin: 0px; padding: 0px; font-size: 12px ;}
Body {font-size: 0.8em; color: #333 ;}
Ul {list-style: none}
. Clear: after {
Content :".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden ;}
Img {border: 0px ;}
. Clear1 {clear: both; width: 100%; height: 1px; overflow: hidden ;}
A {text-decoration: none; color: #404040}
Body {background: # f7f3d0 url (../images/bg.jpg) repeat-x left 210px ;}
/**/
# Pic {border: 1px solid #000; width: 800px; height: auto! Important; height: 300px; min-height: 300px; background: # fff}
# Pic dl {width: 215px; height: 200px; overflow: hidden; border: 1px solid #000; margin: 10px; float: left}
# Pic dt {height: 161px; width: 209px; overflow: hidden; border: 1px solid red; text-align: center}
</Style>
<Script language = "javascript" src = "tt. js"> </script>
<Script language = "javascript">
<! --
Imgsrc = {
Vl: '000000', // high
Vw: '000000', // width
AddEvent: function (elm, evType, fn, useCapture ){
If (elm. addEventListener ){
Elm. addEventListener (evType, fn, useCapture );
Return true;
} Else if (elm. attachEvent ){
Var r = elm. attachEvent ('on' + evType, fn );
Return r;
} Else {
Elm ['on' + evType] = fn;
}
},
Init: function ()
{
Var divn = document. getElementById ("pic ")
Var dln = divn. getElementsByTagName ("dl ")
For (var I = 0; I <dln. length; I ++ ){
Var dtn = dln [I]. getElementsByTagName ("dt ");
Var imgn = dtn [0]. getElementsByTagName ("img ");
If (imgn [0]. height> imgsrc. VL | imgn [0]. width> imgsrc. vw)
{
If (imgn [0]. height/imgsrc. VL> imgn [0]. width/imgsrc. vw)
{
Imgn [0]. heigh = imgsrc. VL
Imgn [0]. width = imgsrc. vl/imgn [0]. height * imgn [0]. width
}
Else
{
Imgn [0]. width = imgsrc. vw
Imgn [0]. heigh = imgsrc. vw/imgn [0]. width * imgn [0]. heigh
}
}
If (imgsrc. VL-imgn [0]. height> 0)
{
Var hh = (imgsrc. VL-imgn [0]. height)/2
Imgn [0]. style. margin = hh + "0px 0px 0px"
}
}
}
}
Imgsrc. addEvent (window, "load", imgsrc. init, false)
// -->
</Script>
</HEAD>
<BODY>
<Div id = "pic">
<Dl>
<Dt> <a href = "images/_1.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_2.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_3.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_4.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_5.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_6.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_1.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_2.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_3.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_4.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_5.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Dl>
<Dt> <a href = "images/_6.jpg" title = ""> </ a> </dt>
<Dd> image 1 </dd>
</Dl>
<Div class = "clear1"> </div>
</Div>
</BODY>
</HTML>
The package is too big to upload. I can put the html file up, just put the picture and see it.