Question

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

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

Answer 1

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

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

将所有内容放在一起（加上缩略图的中心位置，以及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/

Answer 2

您的所有图片都具有相同的宽高比吗？宽高比是宽度除以高度。

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

如果纵横比不同，则无法在不破坏图像的情况下将图像放入相同的形状。有两种方法来处理图像：

切掉部分图像，使其适合您选择的形状。
将图像挤压或拉伸成您选择的形状。

如果您不想破坏图像，则必须保留其宽高比。实际上，这意味着缩略图将具有不同的形状。您可能认为这看起来很奇怪，但大多数人认为缩略图被截断，挤压或拉伸以使它们适合均匀的形状时甚至更奇怪。

Answer 3

还有另一种很好的方法可以通过对象定位来实现这一目标

>>>> re.sub('(\w)', r'\1', 'абвгдеёжз')
'абвгдеёжз'

有关详细信息，请查看此article

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标记网址以匹配您的图片网址，并将类调整大小添加到您的img标记。

图像的渲染高度为103px，但图像看起来不会失真。

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

4 个答案: