具有完全跨浏览器的图像缩略图大小

having an image thumbnail size exactly across browser

本文关键字：图像 略图 浏览器      更新时间：2023-09-26

我正试图想出一个脚本，该脚本将在浏览器上（宽度）有许多缩略图。我希望它能齐平，两边没有缝隙。缩略图应该总是相同的大小，我猜唯一的方法是改变每个图像之间的间距。但是有人能帮我吗？如果我的问题不清楚，请告诉我。

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

谢谢！

类似的东西？

<!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。

这听起来可能很原始，但表只是为类似的东西而设计的。一个解决方案是有一个表格，并将您的图像作为细胞的背景图像。（或者把它放在里面，给它100%的高度和宽度）它很容易控制单元格大小和边距/填充。。这就是为什么它们在结构方面如此受欢迎。

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

如果你不同意我是否遗漏了什么，请发表评论：）

相关文章：