Question

我的缩略图图片目前的尺寸为240 x 125，因此尺寸不适合所有尺寸，以便水平放入div中。

如何让它们在网格中水平显示？另外，如何让调整大小的图像具有相同的宽高比和它们之间的15px间隙？

我的CSS

#full { height:400px; background:#FAFAFA;}
#thumbs { height:150px; background:#E7E7E7; }
#thumbs img { float:left; margin:0 15px; }

这是我的jQuery

$(document).ready(function() {
    $('#thumbs > img').width($('#thumbs').width()/$('#thumbs > img').length-15);
});

Answer 1

你说你想要在img之间存在15px的差距，但你设置margin:0 15px，这意味着左右都是15px，所以两者之间的差距是30px，这就是问题所在。您应该只设置一侧margin-left:15px。

试试这个：

$(document).ready(function() {
    var $img = $('#thumbs > img'),
        len = $img.length,
        gap = $img.css('margin-left').replace('px',''),//15
        divW = $('#thumbs').width()-gap;

    $img.width(divW/len-gap);
});

适合所有带有间隙的图像

1 个答案: