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

Question

我现在正在努力制作相同大小的缩略图，我有一个简单的画廊脚本，只需从数据库中取出所有图像，并将它们放置在页面上，最大宽度为150px，最大高度为150px。

现在，它看起来很奇怪，因为所有图像都有不同的形状，有没有办法在不拆分图像的情况下使它们大小相同？请尽可能简单地解决。 我不想在上传步骤中有选择缩略图尺寸的选项。

- EvilNabster

---

请添加一些代码，以便我们知道您已经尝试了什么。这将使诊断问题变得更容易。此外，如果您在某个地方有一个分阶段的站点，那么我们就可以知道“所有图像具有不同形状”的含义。 - Brian

很简单，尺寸在CSS中。PHP代码是你见过的最简单的。echo '<img class="thumbnail" src="'.$row['img'].'">'; - EvilNabster

当你说你拥有的尺寸是CSS时，你的意思是什么？img{ height:150px; width:150px;} - Larry Lane

我之前也遇到过这个问题，不幸的是，<img>标签对于这个问题来说并不好用。我下面发布了一个可能更有效的答案。 - Andrea

你是在寻找这个吗？ <img src="url" width="150" height="150"> - annam priyatam

Annam，EvilNabster已经在使用这个CSS了。问题在于，由于使用CSS进行调整大小时，图像的宽高比发生变化，导致图像看起来失真。 - Larry Lane

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/

- Andrea

Answer 2

还有一种使用对象定位实现此目的的好方法。

.thumbnail video, img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

请查看此文章获取详情。

- user5415898

Answer 3

你所有的图片都有相同的长宽比吗？ 长宽比是宽度除以高度得到的结果。

如果所有图片都具有相同的长宽比，您可以选择一个宽度并计算高度，或选择一个高度并计算宽度来将它们缩放为相同的形状。

如果长宽比不同，则没有办法将图像适合于相同的形状而不会使其变形。 有两种方式可以使图像变形：

• 裁剪图像的一部分以适应您选择的形状。

• 将图像挤压或拉伸成您选择的形状。

如果您不想使图像变形，您必须保留它们的长宽比。 这意味着缩略图将具有不同的形状。 您可能认为这看起来很奇怪，但大多数人认为当缩略图被截断，挤压或拉伸以适应统一形状时，这更加奇怪。

- Michael Laszlo

---

如果纵横比不同，就没有办法将图像放入相同的形状中而不损坏图像。这并不是真的：您可以使用信封式黑边或裁剪来解决。 - Andrea

我的答案使用CSS来进行信封式留白（contain）或裁剪（cover）。 - Andrea

哦，很抱歉，你已经覆盖了裁剪。 - Andrea

你给出了一个很好的答案。我只是想强调在不损坏图像的情况下，无法将它们适应相同的“形状”（长宽比）。 - Michael Laszlo

这是我知道的唯一选项，但我认为有人会分享一个jQuery选项，我知道有一些，通过设置调整大小的百分比，然后仅显示图像的一部分.. ;( - EvilNabster

@EvilNabster，你看了我的回答吗？ - Andrea

Answer 4

我的 jsfiddle 示例：http://jsfiddle.net/larryjoelane/tbeog5o9/38/

<img class="resize" src="http://cdn.moneycrashers.com/wp-content/uploads/2012/03/apple-imac-27.jpg"/>

<img class = "resize" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-pya5LcLCg82HTG3R36aS9B59SSjNzewp8tAHFZrjFjRb1rXI"/>

CSS：

    img.resize{

    max-width:150px;/*rendered height will be 103px and width will be 150px*/

}

您需要更改我的示例中的img标签URL以匹配您的图像URL，并将类resize添加到您的img标签中。

图像的呈现高度将为103px，但图像不会出现失真。

- Larry Lane

---

第二条规则只是覆盖了第一条: http://jsfiddle.net/larryjoelane/tbeog5o9/23/ - Andrea