Jquery 加载窗口时未正确调整图元的大小

我正在测试一个小小的jQuery调整大小插件

加载页面时，默认页面边距似乎包括在内，但在调整窗口大小时会发生变化。这似乎有时也会发生，但并不总是如此

<style>

* {
    margin: 0;
}

.image-container {
    width: 50%;
    height: 50%;
    float: left;
}

#default        {   background-color: #aaa; }
#loose          {   background-color: #bbb; }
#max            {   background-color: #ccc; }
#max-loose      {   background-color: #ddd; }

</style>

<script>

$(document).ready(function(){

    $('#default > img').load(function(){
        $(this).tailorfit(this.width, this.height);
    });

    $('#loose > img').load(function(){
        $(this).tailorfit(this.width, this.height, false);
    });

    $('#max > img').load(function(){
        $(this).tailorfit(200, 200);
    });

    $('#max-loose > img').load(function(){
        $(this).tailorfit(200, 100, false);
    });
});

</script>

<div class="image-container" id="default">
    <img src="bmo.png">
</div>

<div class="image-container" id="loose">
    <img src="bmo.png">
</div>

<div class="image-container" id="max">
    <img src="bmo.png">
</div>

<div class="image-container" id="max-loose">
    <img src="bmo.png">
</div>

<script>
/**
 * tailorfit
 *
 * @author Rudolf Theunissen <rudolf.theunissen@gmail.com>
 * @copyright Rudolf Theunissen 2013
 * @license MIT <http://opensource.org/licenses/mit-license.php>
 * @link https://github.com/paranoid-android/tailorfit
 * @version 1.0.0
 */

jQuery.fn.tailorfit = function(maxWidth, maxHeight, keepAspect){

    if(keepAspect == undefined) keepAspect = true;
    if(maxWidth   == undefined) maxWidth = true;
    if(maxHeight  == undefined) maxHeight = true;

    var element = $(this);
    var container = $(this).parent();

    element.css('position', 'relative');

    // Just needed this line too.
    onResize();

    $(window).load(function(){
        onResize();
    });

    $(window).resize(function(){
        onResize();
    });

    function onResize(){

        var containerHeight = container.outerHeight(true);
        var containerWidth = container.outerWidth(true);

        var x, y, w, h;

        if(maxWidth == 0) maxWidth = containerWidth;
        if(maxHeight == 0) maxHeight = containerHeight;


        if(!keepAspect){
            if(containerWidth < maxWidth){
                x = 0;
                w = containerWidth;
            } else {
                x = (containerWidth - maxWidth) / 2;
                w = maxWidth;
            }

            if(containerHeight < maxHeight){
                y = 0;
                h = containerHeight;
            } else {
                y = (containerHeight - maxHeight) / 2;
                h = maxHeight;
            }
        } else if(containerWidth >= maxWidth && containerHeight >= maxHeight){
                x = (containerWidth - maxWidth) / 2;
                y = (containerHeight - maxHeight) / 2;
                w = maxWidth;
                h = maxHeight;
        } else {
            var maxRatio = maxWidth / maxHeight;
            if(maxRatio > containerWidth / containerHeight){
                var rh = containerWidth / maxRatio;
                x = 0;
                y = (containerHeight - rh) / 2;
                w = containerWidth;
                h = rh;
            } else {
                var rw = containerHeight * maxRatio;
                x = (containerWidth - rw) / 2;
                y = 0;
                w = rw;
                h = containerHeight;
            } 
        }

        element.css({
            left: x, top: y, width: w, height: h
        });
    }
}
</script>

* {
保证金：0；
}
.图像容器{
宽度：50%；
身高：50%；
浮动：左；
}
#默认{背景色：#aaa；}
#松散{背景色：#bbb；}
#最大{背景色：#ccc；}
#最大松散{背景色：#ddd；}
$（文档）.ready（函数（）{
$（'#default>img'）。加载（函数（）{
$（this.tailorfit）（this.width，this.height）；
});
$（'#loose>img'）。加载（函数（）{
$（this.tailorfit）（this.width，this.height，false）；
});
$（'#max>img'）。加载（函数（）{
美元（此）.tailorfit（200200）；
});
$（'#max loose>img'）。加载（函数（）{
$（此）.tailorfit（200100，假）；
});
});
/**
*裁缝
*
*@作者鲁道夫·特尤尼森
*@版权所有Rudolf Theunissen 2013
*@license-MIT
*@linkhttps://github.com/paranoid-android/tailorfit
*@version 1.0.0
*/
jQuery.fn.tailorfit=函数（maxWidth、maxHeight、KeepSpect）{
如果（keepspect==未定义）keepspect=true；
如果（maxWidth==未定义）maxWidth=true；
如果（maxHeight==未定义）maxHeight=true；
var元素=$（此）；
var container=$（this.parent（）；
css（'position'，'relative'）；
//我也需要这条线。
onResize（）；
$（窗口）。加载（函数（）{
onResize（）；
});
$（窗口）。调整大小（函数（）{
onResize（）；
});
函数onResize（）{
var containerHeight=container.outerHeight（true）；
var containerWidth=container.outerWidth（true）；
变量x，y，w，h；
如果（maxWidth==0）maxWidth=containerWidth；
如果（maxHeight==0）maxHeight=containerHeight；
如果（！keepspect）{
if（集装箱宽度<最大宽度）{
x=0；
w=集装箱宽度；
}否则{
x=（容器宽度-最大宽度）/2；
w=最大宽度；
}
if（集装箱高度<最大高度）{
y=0；
h=集装箱重量；
}否则{
y=（容器高度-最大高度）/2；
h=最大高度；
}
}else if（containerWidth>=maxWidth&&containerHeight>=maxHeight）{
x=（容器宽度-最大宽度）/2；
y=（容器高度-最大高度）/2；
w=最大宽度；
h=最大高度；
}否则{
var maxRatio=最大宽度/最大高度；
if（最大比率>集装箱宽度/集装箱高度）{
var rh=集装箱宽度/最大比率；
x=0；
y=（容器高度-右侧）/2；
w=集装箱宽度；
h=相对湿度；
}否则{
var rw=集装箱重量*最大比率；
x=（集装箱宽度-rw）/2；
y=0；
w=rw；
h=集装箱重量；
} 
}
element.css({
左：x，上：y，宽：w，高：h
});
}
}

---

在Chrome 26.0上测试时，默认情况下，您应该使用css类隐藏图像，当窗口加载并调整图像大小时，显示它们：

<style type="text/css"> img.myclass{display:none}<style>

<script>
window.onload = function(){
    $('#default > img').load(function(){
                $(this).tailorfit(this.width, this.height);
            });

            $('#loose > img').load(function(){
                $(this).tailorfit(this.width, this.height, false);
            });

            $('#max > img').load(function(){
                $(this).tailorfit(200, 200);
            });

            $('#max-loose > img').load(function(){
                $(this).tailorfit(200, 100, false);
            });

            $('.myclass').removeClass('myclass');

        };

</script>

img.myclass{display:none}
window.onload=函数（）{
$（'#default>img'）。加载（函数（）{
$（this.tailorfit）（this.width，this.height）；
});
$（'#loose>img'）。加载（函数（）{
$（this.tailorfit）（this.width，this.height，false）；
});
$（'#max>img'）。加载（函数（）{
美元（此）.tailorfit（200200）；
});
$（'#max loose>img'）。加载（函数（）{
$（此）.tailorfit（200100，假）；
});
$（'.myclass'）.removeClass（'myclass'）；
};

---

或者使用某种动画作为fadeIn（），以获得更好的效果。

我是否应该将代码粘贴到此处？它已经是一个演示/sscce，我必须粘贴整个内容。可能图像是一个内联元素。。。只是一个猜测。。。但是，如果你在

img

元素上添加广告

display:block

或类似的东西，它可能会起作用。我已经在代码中添加了你建议的内容，但似乎没有效果。如果它必须在

$（window.load）中，那么在
tailorfit.js
中加载窗口时，会调用一个
onResize
。正确，您应该将它放在window onload回调函数中。当然，您的图像应该添加“myclass”类。