在調整大小的圖像上的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上的全寬

回答

相關問題