Question

我的脚本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)

    });
});

Answer 1

找到了解决方案。

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

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

1 个答案: