Question

我正在努力想出一个脚本，它在浏览器的宽度上有很多缩略图。我希望它能够齐平并且两侧没有间隙。缩略图应始终大小相同，我猜测唯一的方法是更改每个图像之间的间距。但有人可以帮助我吗？如果我的问题不清楚，请告诉我。

编辑：这是一个例子：http://www.beautyineverything.com/

谢谢！

Answer 1

这样的东西？

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
    <title>sandbox</title>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
    <script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
    <script type='text/javascript'>
        var MAX_IMAGE_WIDTH = 240;

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

        function resizeImages() {
            var containerWidth = $('.imageContainer').innerWidth();
            var numberOfImages = Math.ceil(containerWidth / MAX_IMAGE_WIDTH);
            var imageWidth = Math.ceil(containerWidth / numberOfImages);
            var imageWidthLast = containerWidth - (numberOfImages - 1) * imageWidth;
            $('.imageContainer .image').css('width', imageWidth);
            $('.imageContainer .image:nth-child(' + numberOfImages + 'n)').css('width', imageWidthLast);

            $('.imageContainer .image').each(function(){
                $(this).text($(this).innerWidth());
            });
        }
    </script>
    <style type='text/css'>
        .imageContainer {
            border:1px solid black;
            overflow:hidden;
        }
        .image {
            width:160px;
            height:160px;
            float:left;
        }
    </style>
</head>
<body>
    <div class='imageContainer'>
        <?php
            for ( $n = 10; $n < 30; ++$n) {
                $backgroundColor = '#' . sprintf('%02x%02x%02x', $n * 8, $n * 8, $n * 8);
                echo "<div class='image' style='background-color:{$backgroundColor};'></div>";
            }
        ?>
    </div>
</body>
</html>

调整图像大小可以用更聪明的方式编写，这样它们就不会223+223+223+223+223+223+223+216而是223+222+222+222+222+222+222+222。为此，应单独计算每个列的宽度，以使列的宽度仅相差1px。

Answer 2

这可能听起来很原始但桌子只是为这样的东西而设计的。一种解决方案是使用表格并将图像作为单元格的背景图像。（或者把它放在里面并给它一个高度和宽度100％）它很容易控制单元尺寸和边距/填充..这就是为什么它们如此受欢迎的结构材料。

在排除这个想法之前，请注意（除了我讨厌使用表格来设计和定位东西，但不要犹豫将它用于它的意图）制作表格会减少金额要编写的代码。使用css来调整单元格和表格的大小。使用内联来放置背景图像。没有js功能如此永远。

如果您不同意我是否遗漏了某些内容，请发表评论：）

在浏览器中具有图像缩略图大小

2 个答案: