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

我现在很难做出同样大小的缩略图， 我有一个简单的图库脚本，它只是将所有图像从数据库中取出，并将它们放置到最大宽度为150px，最大高度为150px的页面上

现在，它看起来很奇怪，因为所有的图像都有不同的形状，有没有办法使它们的大小相同，而不将图像分开？请用最简单的方法。

---

我不想在上传步骤中选择缩略图的尺寸。

使用

img

您只有两个选项：设置最大宽度或最大高度。无论哪种方式，你都不会得到大小合理的缩略图：如果你设置了最大宽度，那么一些图像就会太高。如果设置最大高度，则某些图像将过宽。如果您同时设置宽度和高度，它将被严重扭曲，因为它将忽略纵横比

相反，我建议制作一个固定大小的

div

，并将缩略图设置为其

背景图像

，然后将

背景大小

设置为

封面

。这将提供更好的缩略图，因为它可以缩放和裁剪图像以使其适合。如果要避免切割图像的边缘，请为

div

设置

背景色

，并将

背景大小

设置为

包含

，这样可以缩小图像以使其适合，并创建“信箱”效果

将它们放在一起（加上裁剪的缩略图居中，以及

内联块

，使其像

标记那样工作）：

.缩略图{
背景色：黑色；
宽度：250px；
高度：200px；
显示：内联块；/*使其像*/
背景尺寸：封面；/*或包含*/
背景位置：中心；
背景重复：无重复；
}

下面是一个针对

封面的JSFIDLE演示：

这里是一个JSFIDLE演示，用于
包含
：
所有图像的纵横比都相同吗？纵横比是宽度除以高度

如果所有图像具有相同的纵横比，则可以通过选择宽度并计算高度，或选择高度并计算宽度，将它们缩放为相同的形状

如果纵横比不同，则无法将图像拟合到相同的形状中而不损坏图像。有两种方法可以损坏图像：


切掉图像的一部分，使其符合您选择的形状

将图像压缩或拉伸到所选形状


如果不想损坏图像，则必须保留其纵横比。这确实意味着缩略图将具有不同的形状。你可能会认为这看起来很奇怪，但大多数人认为，为了使缩略图适合一个统一的形状而对其进行截断、挤压或拉伸时，这更奇怪。
我的JSFIDLE示例：

当然，在我的示例中，您必须更改img标记url以匹配图像url，并将类resize添加到img标记中

图像的渲染高度将为103px，但图像看起来不会失真。
使用对象定位还有另一种很好的方法来实现这一点


.缩略图视频，img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

请查看此项了解详细信息
请添加一些代码，以便我们知道您已经尝试了什么。这将使诊断问题更容易一些。另外，如果你在某个地方有一个临时站点，那么我们知道“所有图像都有不同的形状”是什么意思。。php代码是您见过的最简单的代码<代码>回显“”包含
）或裁剪（
封面
）。哦，对不起，你做了封面裁剪。你给出了一个很好的答案。我只是想强调一点，就是不可能将图像装配到同一个“形状”（纵横比）中而不被损坏。@EvilNabster你看了我的答案了吗？第二条规则只是覆盖了第一条规则：
<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>

<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"/>

    img.resize{

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

}