Question

我有一张桌子，每张图片都在表格单元格内的div中。由于有许多不同大小的图像，我编写了以下代码，如果它们的高度大于200px则使它们更小，否则如果它们的宽度大于118px但是这个脚本不能正常工作，有时它在我刷新页面时有效。我究竟做错了什么？

var tableImages = $("table td>div> img");
        tableImages.each(function () {
            var curTableImgHeight = $(this).height();
            var curTableImgWidth = $(this).width();

            if (curTableImgHeight > 200) {
                $(this).css({ "max-width": "188px", "height": "100%" });
            }
            else if (curTableImgWidth > 188) {
                $(this).css({ "max-height": "200px", "width": "100%" });

                var parDivHeight = $(this).parent().height();
                var topmargin = (parDivHeight - $(this).height()) / 2;
                $(this).css('margin-top', topmargin);
            }


        });

Answer 1

我想您可能想要使用$( window ).load()：

$( window ).load(function() {
    var tableImages = $("table > td > div > img");
    ....
});

希望这有帮助。

Answer 2

我认为你不应该在这里使用jQuery。

.img {
    max-width:188px;
    max-height:200px;

    /* set min width and height if needed */
}

简单干净

如果您拥有不同尺寸的图像，则不会让它们看起来完全相同。你必须选择你的布局宽度或高度，并说所有图像都必须匹配那个宽度......

图像不会变小

2 个答案: