with native JavaScript implementation of the scale scaling, max-width and max-height in IE6 incompatible issues, today with jquery implementation of these problems
jquery part of the code
<script Type= "Text/javascript"
$ (document). Ready (function () {
var maxwidth=$ (". Imgbox"). width ();
$ ("img"). each (function () {
if (!$.support.style&&$.browser.msie&& ($.browser.version==6.0)) {// Determines when the browser is IE6
var imgwidth=$ (this). Width (),
var imgheight=$ (this). Height ();
var maxheight = maxwidth* Imgheight/imgwidth;
if (imgwidth>maxwidth) {
$ (this). CSS ("width", maxwidth). CSS ("height", maxheight);
}
}
})
})
</script>
CSS Partial code:
<style type= "text/css"
body{margin:0; padding:0;}
. box{width:700px; margin:0 Auto;}
. imgbox{background: #CCCCCC; *display:table-cell; width:400px; margin:10px auto; *font-size:350px; line-height : 400px; Text-align:center; Vertical-align:middle; padding:20px;}
img{border:0 none; max-width:400px; overflow:hidden; vertical-align:middle;}
</style>
HTML code:
<div class= "box"
<div class= "Imgbox"
</div>
</div>