Today, I encountered a problem about how to use js to solve the problem that ie6 does not support max-width and max-height. At first, I used the jQuery method to implement it, but I still couldn't get the values in css, as shown in
Copy codeThe Code is as follows:
If ($. browser. msie & $. browser. version = 6.0)
{
Var maxWidth = parseInt ($ ('. viewBigPic img').css ('max-width '));
$ ('. ViewBigPic img'). each (function (){
If ($ (this). width ()> maxWidth)
$ (This). width (maxWidth );
});
}
I don't know why. I can't get the maximum value in css, and then I can only use native js to implement it.
The js Code is as follows:
Copy codeThe Code is as follows:
<Script type = 'text/javascript '>
Function setPhotoSize (elem, width, height ){
<! -- [If IE 6]>
Try {
Var image = new Image ();
Image. src = elem. src;
If (image. width> 0 & image. height> 0 ){
Var rate = (width/image. width If (rate <= 1 ){
Elem. width = image. width * rate;
Elem. height = image. height * rate;
}
Else {
Elem. width = image. width;
Elem. height = image. height;
}
}
} Catch (e ){}
<! -- [Endif] -->
}
</Script>
Part of the html code is as follows:
Copy codeThe Code is as follows:
<Div class = "viewBigBox">
<Div class = "viewBigPic">
<P> </p>
</Div>
</Div>
The css style is as follows:
Copy codeThe Code is as follows:
. ViewBigBox {border: 1px solid # e3e3e3; background-color: # ffffff; padding: 1px; margin-top: 18px ;}
. ViewBigPic {background-color: # f7f7f7; padding: 20px 14px ;}
. ViewBigPic p {display: table-cell; width: 730px; line-height: 470px; overflow: hidden; vertical-align: middle; text-align: center; height: 470px; * font-size: 390px ;}
// Implement vertical center of the image, mainly using the ratio of font-size to height
. ViewBigPic p img {vertical-align: middle; max-height: 470px; max-width: 730px ;}