0

我正在尝试使用一堆浮动的动态陈旧图像创建一个基于投资组合的网站，到目前为止，我已经通过 jQuery 和 css 为 chrome 和 Firefox 工作（最新版本 anno. 2012）

我的问题是（一如既往）IE 7-8-9，我无法理解在这个平台上可能会破坏它的问题，我最好的猜测是这是一个 jQuery 交叉问题？

检查这个 jsFiddel

或在这里查看我的在线示例

我正在寻找的是一些关于我可能会出错的建议，因为我现在头发灰白，试图自己解决，任何建议、想法、文章等都非常受欢迎

在此先感谢

jQuery代码：

$(window).load(function () {
    plottingData();
    resizeImage();
});

$(window).resize(function () {
    plottingData();
    resizeImage();
});

function plottingData() {
    var image = $('.box img');
    var divW = $(".box").width();
    var divH = $(".box").height();
    var imgW = image.width();
    var imgH = image.height();
    $('.outputText').html('DIV CONTAINER W: ' + divW + ' H: ' + divH + '  ::  imgW: ' + imgW + ' : imgH: ' + imgH);
}


function resizeImage() {
    $("img").each(function () {
        var maxWidth = $(".box").width();; // Max width for the image
        var maxHeight = $(".box").height();; // Max height for the image
        var maxratio = maxHeight / maxWidth;
        var width = $(this).width(); // Current image width
        var height = $(this).height(); // Current image height
        var curentratio = height / width;
        // Check if the current width is larger than the max

        if (curentratio > maxratio) {
            ratio = maxWidth / width; // get ratio for scaling image
            /*
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height *ratio); // Scale height based on ratio
            */
            $(this).css("width", "100%");
            $(this).css("height", "auto");
        } else {
            /*
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            */
            $(this).css("width", "auto");
            $(this).css("height", "100%");
        }

    });
}
4

1 回答 1

0

试试看：

...
var box = $(this).parent(".box");
var maxWidth = box.width();
var maxHeight = box.height();
...

同样的宽度plottingData，你也必须在那里迭代。你能告诉我你得到的所有盒子和图像的高度吗？你很幸运，它们看起来都一样大。为每个框和图像应用规则。

于 2013-04-03T15:02:43.243 回答