本文介绍了如何制作相同尺寸的缩略图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm having a hard time now trying to make same sized thumbnails,I have a simple gallery script that just takes all images out of database and places them to the page with max width 150px and max height 150px.

现在,这看起来很奇怪,因为所有图像都具有不同的形状,是否有任何方法可以使它们大小相同而又不会将图像分开?请以最简单的方式.我不想在上传步骤中选择缩略图的尺寸.

Now , it looks weird because all images have different shape, is there any way to make them same size without breaking the image apart? The simplest way possible please.I don't want to have an option on uploading step to chose dimensions for thumbnail.

推荐答案

对于 img ,您只有两个选择:设置最大宽度或最大高度.无论哪种方式,您都不会获得大小合适的缩略图:如果设置了最大宽度,则某些图像会太高.如果设置最大高度,则某些图像将太宽.如果同时设置了宽度和高度,则它会严重失真,因为它将忽略宽高比.

With img you only have two options: Set a maximum width, or a maximum height. Either way you won't get reasonably-sized thumbnails: If you set the maximum width, then some images will be too tall. If you set the maximum height, then some images will be too wide. If you set both width and height, it'll get horribly distorted, because it will ignore the aspect ratio.

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

Instead, I suggest making a div of a fixed size and setting the thumbnail as its background-image, then setting background-size to cover. This will give much better thumbnails, as it scales and crops the image to make it fit. If you want to avoid cutting off the image's edges, give the div a background-color and set background-size to contain, which instead scales down the image to make it fit and creates a "letterbox" effect.

将所有内容放在一起(加上裁剪的缩略图居中位置和 inline-block ,因此其作用类似于< img> 标签):

Putting it all together (plus thumbnail centring for the crop, and inline-block so it acts like an <img> tag does):

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

Here's a jsfiddle demo for cover: http://jsfiddle.net/tbeog5o9/24/

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

And here's a jsfiddle demo for contain: http://jsfiddle.net/tbeog5o9/25/

这篇关于如何制作相同尺寸的缩略图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-27 13:39
查看更多