Today encountered a problem with JS to solve IE6 support max-width,max-height, just started with the jquery method to achieve, but has been not to get the value of CSS, such as
Copy Code code 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);
});
}
do not know what the reason is not to get the maximum value of CSS, and then only with the original JS to achieve
The JS code is as follows:
Copy Code code 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 < height/image.height)? Width/image.width:height/image.height;
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 Code code as follows:
<div class= "Viewbigbox" >
<div class= "Viewbigpic" >
<p></p>
</div>
</div>
The CSS styles are as follows:
Copy Code code as follows:
. viewbigbox{border:1px solid #e3e3e3; Background-color: #ffffff; padding:1px; margin-top:18px;}
. viewbigpic{Background-color: #f7f7f7;p adding: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;}
To achieve the vertical center of the picture, mainly using the ratio of font-size and height
. viewbigpic p img{vertical-align:middle; max-height:470px; max-width:730px;}