如何在裁剪前不修剪的情况下以小形式裁剪大图像？

Posted 2023-02-25

【中文标题】如何在裁剪前不修剪的情况下以小形式裁剪大图像？

【英文标题】：How to crop large image in small form without trimming before crop?

【发布时间】：2012-04-01 21:10:19

【问题描述】：

有人知道正确使用“CSS 图像大小（我的意思是宽度和高度）的动态变化”的图像裁剪吗？

如果有原始图像尺寸（例如尺寸：400 像素 x 400 像素）和宽度：100%，则所有图像裁剪都可以正常工作；

但是，如果向用户显示尺寸为 1500px x 1500px 的图片并仅使用 css 将其缩小到 100px x 100px（因为 1500px - 通常对于屏幕来说太大而且看起来不漂亮） - 在这种情况下，图像裁剪器就是我之前看到的发出错误或使用初始值制作缩略图（左上角）。我需要从 Facebook 相册中提取图片，而且它们通常都太大了。

我知道可以在裁剪前缩小图像，但会降低质量。

顺便说一句，看起来有办法做到这一点，因为即使我在 css 中“动态”更改图像的大小，在 jCrop 预览缩略图中看起来也很好。只是预览！完成裁剪后的图片不正确，我说过会有左上角的图片。

【问题讨论】：

CSS 不会“裁剪”图像 - 它可能会用溢出遮盖部分图像：隐藏在缩小尺寸的容器中。

是的，是的，我知道，对不起我的英语 =（我不是指在 css 中裁剪，只是减少 VIEW 以使其更舒适，这在我们想要裁剪的图像太大的情况下会很有用（例如 4.000 像素 x 4.000 像素）

img width: 400px; height: 400px 可以解决问题，但质量取决于浏览器。

是的，这就是我之前所说的，如果我做了这个技巧 - 图像裁剪器开始计算错误的包皮环切坐标。好的，我的问题是：如何在不损失图像质量的情况下裁剪大图像（约 2.000 像素，2.000 像素）？

crop = 物理移除图像的外边缘。例如拿剪刀剪掉打印出来的图片的一部分。您所追求的是调整大小/缩放，这会保留图像的所有“外观”，但会减少像素总数。根据定义，调整大小也会降低质量，因为您正在减少像素数。

【参考方案1】：

好的，解决方案是：将原始图像大小划分为“在 css 中更小”的大小。 我们获得系数，然后将其发送到裁剪 - 将 x1、y1、高度、宽度乘以该系数。利润！

【参考方案2】：

如果您正在寻找的是响应式或流畅的图像裁剪器（适应屏幕），您应该尝试Guillotine，查看demo 并调整浏览器窗口的大小以了解它是如何适应的。