1

一旦图像被调整大小，我的脚本 encan.js 正在为图像设置容器的宽度/高度。这在 Chrome 中效果很好，但在 Firefox (mac) 中不起作用！我不知道为什么......任何帮助将不胜感激

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)

    });
});
4

1 回答 1

0

找到了解决方案。

我删除了 max-width:100%; 在 img (CSS) 上。我将 inline-block 放在容器上，并将 max-height 放在图像上。这样，调整大小的图像在 Chrome、Safari、Firefox 中保持不变。

于 2013-04-06T17:06:48.823 回答