利用JS解决ie6不支持max-width,max-height问题的方法-js tutoriel-php.cn

Maison

interface Web

js tutoriel

利用JS解决ie6不支持max-width,max-height问题的方法

May 16, 2016 pm 05:05 PM

ie6

本篇文章主要介绍了利用JS解决ie6不支持max-width,max-height问题的方法。需要的朋友可以过来参考下，希望对大家有所帮助。

今天遇到一个关于用js解决ie6不支持支持max-width，max-height的问题，刚开始用jQuery方法来实现，不过一直获取不到css里面的值，如：

  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);
    });
  }

Copier après la connexion

不知道是什么原因，获取不到css里面的最大值，然后只能用原生的js来实现

js代码如下：

&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;

Copier après la connexion

部分的html代码如下：

&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;

Copier après la connexion

css样式如下：

.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;}

Copier après la connexion

以上就是本章的全部内容，更多相关教程请访问JavaScript视频教程！

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn