css - 当用户上传图像时，我如何使用 CSS 来最小化倾斜？

Question

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

在 CSS 中裁剪图像很简单——将其包装在 DIV 中并隐藏溢出：

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

但是，问题在于，如果图像非常大——比如 600 像素 x 400 像素——那么你只会看到整个画面的一个小角落。如果图像小于 100 像素乘 100 像素，则不会向上调整大小。

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

4 回答 4