我现在正在努力制作相同大小的缩略图,我有一个简单的画廊脚本,只需从数据库中取出所有图像,并将它们放置在页面上,最大宽度为150px,最大高度为150px。
现在,它看起来很奇怪,因为所有图像都有不同的形状,有没有办法在不拆分图像的情况下使它们大小相同?请尽可能简单地解决。 我不想在上传步骤中有选择缩略图尺寸的选项。
我现在正在努力制作相同大小的缩略图,我有一个简单的画廊脚本,只需从数据库中取出所有图像,并将它们放置在页面上,最大宽度为150px,最大高度为150px。
现在,它看起来很奇怪,因为所有图像都有不同的形状,有没有办法在不拆分图像的情况下使它们大小相同?请尽可能简单地解决。 我不想在上传步骤中有选择缩略图尺寸的选项。
使用 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/
还有一种使用对象定位实现此目的的好方法。
.thumbnail video, img {
width: 100%;
height: 100%;
object-fit: cover;
}
你所有的图片都有相同的长宽比吗? 长宽比是宽度除以高度得到的结果。
如果所有图片都具有相同的长宽比,您可以选择一个宽度并计算高度,或选择一个高度并计算宽度来将它们缩放为相同的形状。
如果长宽比不同,则没有办法将图像适合于相同的形状而不会使其变形。 有两种方式可以使图像变形:
裁剪图像的一部分以适应您选择的形状。
将图像挤压或拉伸成您选择的形状。
如果您不想使图像变形,您必须保留它们的长宽比。 这意味着缩略图将具有不同的形状。 您可能认为这看起来很奇怪,但大多数人认为当缩略图被截断,挤压或拉伸以适应统一形状时,这更加奇怪。
contain
)或裁剪(cover
)。 - Andrea我的 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,但图像不会出现失真。
echo '<img class="thumbnail" src="'.$row['img'].'">';
- EvilNabster