How to use JS to solve the problem that ie6 does not support max-width and max-height-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use JS to solve the problem that ie6 does not support max-width and max-height

May 16, 2016 pm 05:05 PM

ie6

This article mainly introduces how to use JS to solve the problem that ie6 does not support max-width and max-height. Friends in need can come here for reference. I hope it will be helpful to everyone.

Today I encountered a problem about using js to solve the problem of ie6 not supporting max-width and max-height. I just started using jQuery to implement it, but I couldn’t get the value in css, such as:

if($.browser.msie &amp;&amp; $.browser.version == 6.0)
{
  var maxWidth = parseInt($(&#39;.viewBigPic img&#39;).css(&#39;max-width&#39;));
  $(&#39;.viewBigPic img&#39;).each(function(){
    if ($(this).width() &gt; maxWidth)
      $(this).width(maxWidth);
  });
}

Copy after login

I don’t know why, but I can’t get the maximum value in css, so I can only use native js to achieve it

The js code is as follows:

The html code of the

&lt;script type=&#39;text/javascript&#39;&gt;
function setPhotoSize(elem, width, height) {
&lt;!--[if IE 6]&gt;
try{
var image=new Image();
image.src=elem.src;
if(image.width&gt;0 &amp;&amp; image.height&gt;0){
var rate = (width/image.width &lt; height/image.height)? width/image.width : height/image.height;
if(rate &lt;= 1){
elem.width = image.width*rate;
elem.height = image.height*rate;
}
else {
elem.width = image.width;
elem.height = image.height;
}
}
}catch(e){}
&lt;!--[endif]--&gt; 
}
&lt;/script&gt;

Copy after login

part is as follows:

&lt;p class=&quot;viewBigBox&quot;&gt;
  &lt;p class=&quot;viewBigPic&quot;&gt;
     &lt;p&gt;&lt;img id=&quot;imgid&quot; onload=&quot;setPhotoSize(this,730,470)&quot; src=&quot;images/viewShow.jpg&quot; alt=&quot;&quot;/&gt;&lt;/p&gt;
  &lt;/p&gt;
&lt;/p&gt;

Copy after login

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;}
//实现图片垂直居中，主要运用了font-size与height的比例
.viewBigPic p img{ vertical-align:middle; max-height:470px; max-width:730px;}

Copy after login

above That’s all the content of this chapter. For more related tutorials, please visit JavaScript Video Tutorial!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn