在调整大小的图像上的jQuery宽度= Firefox上的全宽

我的脚本encan.js设置图像容器的宽度/高度，一旦图像被调整大小。这在Chrome中非常适用，但在Firefox（mac）中无法使用！我不知道为什么...任何帮助，将不胜感激在调整大小的图像上的jQuery宽度= Firefox上的全宽

http://encans.dev.wdi.qc.ca/test.html

HTML：

<td class="item grille" style="width:512px;max-height:364px;" id="item_3"> 

    <div class="cell clearfix"> 

     <div class="img_ctn"> 
      <div class="img_box"> 
       <img src="/uploads/items/_encan/SaladBowlFinish.jpg" /> 

       <div class="img_title"> 
        <div class="img_item_id"># 2</div> 
        <div class="img_item_mt"><span class="prix_actuel">100 $</span></div> 

       </div> 
      </div> 
     </div> 
     <input type="hidden" id="fid_3" value="2" /> 
     <div class="item_d"> 


      <div class="block clearfix"> 


       <p><strong><span class="item_titre">test 1</span></strong></p> 

       <p>Valeur de <strong>400.00&nbsp;$</strong><br /></p> 

       <p class="mise_display"> 

        <span class="meneur_display">Meneur : #<span class="meneur">42</span></span> 
       </p> 
      </div> 



     </div> 
    </div> 

</td>

CSS：

<style type="text/css" media="screen"> 
.img_ctn { 
    width:auto; 
    overflow:hidden; 
    text-align:center; 
} 

.img_box { 
    position:relative; 
    overflow: hidden; 
    border:solid #555 1px; 

} 

.img_box img { 
    position:relative; 
    z-index:1; 
    max-width:100%; 
    max-height:100%; 
} 

</style>

的jQuery：

$(document).ready(function(){ 
    $('#encan table td img').each(function(index) { $(this).one('load',function(){ 
     if(this.complete) $(this).load(); 

     console.log($(this).width()); // Will Log a higher number on Firefox than Safari or Chrome (~614) 

    }); 
});

来源

2013-04-04 guylabbe.ca

如果您要发布相关代码行，我相信有人会很乐意帮助您。 – darkpbj 2013-04-04 02:02:16

对不起，您是对的，我添加了最少的代码来显示问题。您也可以在提供的网址上看到它。非常感谢 – 2013-04-04 10:16:08

找到t他解决。

我删除了最大宽度：100％;在img（CSS）上。我在容器上放置了内嵌块，并在图像上放置了最大高度。这样，Chrome，Safari，Firefox中调整大小的图片保持不变。

来源

2013-04-06 17:06:48

在调整大小的图像上的jQuery宽度= Firefox上的全宽

回答

相关问题