Question

我正在尝试缩小缩略图的大小以使它们在页面上均匀适合，但仍然尽可能大，而不会超过特定的宽度。

以下代码是我能够实现的最接近的代码，问题是在某些宽度下，它并不完全占据整个宽度。

我会假设这是因为我对数学的理解不够充分，有人可以帮忙吗？（我对Javascript也不是特别熟悉）。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <style>
            .thumb {
                display: inline-block;
                background-color: green;
                margin: 4px;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="thumbnails"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>

        <script>
            var resizeThumbnails = function() {
                var w = $('#thumbnails').width();
                var thumbsPerRow = w / 208;
                var thumbDiffer = 208 - (thumbsPerRow % 1) * 208;
                var thumbSize = 208 - (thumbDiffer / Math.floor(thumbsPerRow));
                var thumbSize = thumbSize - 8;
                $("#thumbnails .thumb").width(thumbSize).height(thumbSize);
            }
            $(window).resize(resizeThumbnails);
            $(window).ready(resizeThumbnails);
            resizeThumbnails();
        </script>
    </body>
</html>

Answer 1

var resizeThumbnails = function() {
    var w = $('#thumbnails').width();
    var thumbsPerRow = Math.ceil(w / 208);
    var thumbSize = Math.floor(w / thumbsPerRow) -8;
    $("#thumbnails .thumb").width(thumbSize).height(thumbSize);
}

通过将容器宽度除以缩略图宽度并向上舍入来计算出一行中可以容纳多少缩略图（因为我们添加额外的缩略图以便调整其他缩小版本）。根据每行的数量重新计算缩略图大小。

动态缩小缩略图的大小以均匀占据空间

1 个答案: