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 に答える