JS is used to solve the problem that ie6 does not support max width and max height
- 2020-03-30 01:10:33
- OfStack
Js 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 < 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:
<div class="viewBigBox">
<div class="viewBigPic">
<p><img id="imgid" onload="setPhotoSize(this,730,470)" src="images/viewShow.jpg" alt=""/></p>
</div>
</div>
The CSS style 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;}
//To achieve the vertical image center, mainly using the font-size and height ratio
.viewBigPic p img{ vertical-align:middle; max-height:470px; max-width:730px;}