javascript - 如何制作相同大小的缩略图

Question

我现在很难尝试制作相同大小的缩略图，我有一个简单的画廊脚本，它只是将所有图像从数据库中取出并将它们放置到最大宽度为 150 像素和最大高度为 150 像素的页面。

现在，它看起来很奇怪，因为所有图像都有不同的形状，有没有什么办法可以使它们大小相同而不破坏图像？请用最简单的方法。我不想在上传步骤中选择缩略图的尺寸。

Answer 1

与 img您只有两个选择:设置最大宽度或最大高度。无论哪种方式，您都不会获得合理大小的缩略图:如果您设置最大宽度，那么一些图像会太高。如果您设置最大高度，则某些图像会太宽。如果您同时设置宽度和高度，它会变得非常扭曲，因为它会忽略纵横比。

相反，我建议制作一个 div固定大小并将缩略图设置为其 background-image , 然后设置 background-size至 cover .这将提供更好的缩略图，因为它会缩放和裁剪图像以使其适合。如果您想避免切断图像的边缘，请提供 div一个background-color并设置 background-size至 contain ，而是缩小图像以使其适合并创建“信箱”效果。

将它们放在一起(加上裁剪的缩略图居中，和 inline-block 所以它就像 <img> 标签一样):

<style>
.thumbnail {
    background-color: black;
    width: 250px;
    height: 200px;
    display: inline-block; /* makes it fit in like an <img> */
    background-size: cover; /* or contain */
    background-position: center center;
    background-repeat: no-repeat;
}
</style>
<div class=thumbnail style="background-image: url(image1.jpg);"></div>
<div class=thumbnail style="background-image: url(image2.jpg);"></div>

这是 cover 的 jsfiddle 演示: http://jsfiddle.net/tbeog5o9/24/

这是 contain 的 jsfiddle 演示: http://jsfiddle.net/tbeog5o9/25/