当用户上传图像时，我如何使用CSS来最大程度地减少倾斜

Question

>我允许用户将个人资料图片上传到他们的个人资料页面。头像的尺寸为 100px x 100px。如何在 css 中编辑我的 img 属性样式，以便在用户上传不完全正方形的图像时，图像失真最小化？

Answer 1

裁剪

它而不是正常更改它的尺寸。即使重新采样，也会使图像失真。让用户裁剪他上传的图像（使用canvas/javascript），并让PHP脚本根据从中获得的坐标裁剪图像。

Answer 2

在 CSS 中裁剪图像是微不足道的 - 将其包装在 DIV 中并隐藏溢出：

div.imgwrapper {
    width: 100px;
    height: 100px;
    overflow: hidden;
}

但问题是，如果图像非常大 - 比如600px x 400px - 那么你只会看到整个事物的一个小角落。如果图像小于 100px x 100px，则不会向上调整大小。

解决此问题的唯一（客户端）方法是使用 JavaScript 检测图像的尺寸，即使这样它也会变得棘手（因为直到加载图像后才能检测到图像尺寸，但如果没有进一步的技巧，您无法检测图像加载与缓存中的图像）。我不会详细介绍，因为您没有要求JS解决方案，但是您可以搜索SO以获取一些解决方案。

Answer 3

您可以像@Truth提到的那样在上传时裁剪图像，也可以使用像 TimThumb 这样的脚本将原始大小的图像动态裁剪为您需要的任何尺寸。

Answer 4

无需诉诸某种通过代码裁剪图像的方法，另一种方法是使用 100px/100px div ，并将上传的图像设置为此div 的背景，将其水平/垂直位置集中设置。

当然，您需要检查上传图像的文件大小，否则您最终可能会在一个页面上加载 20 张 3Mb 个人资料图像。