我正在尝试编写一个脚本，该脚本将在浏览器(宽度)上有许多缩略图。我希望它能够齐平并且侧面没有间隙。缩略图应始终具有相同的大小，我猜唯一的方法是更改每个图像之间的间距。但有人可以帮我吗？如果我的问题不清楚，请告诉我。
编辑:这是一个示例: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。
关于javascript - 在浏览器中具有精确的图像缩略图大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6380980/