HTML动态裁剪

Question

我目前在显示表中的图像时遇到问题。

图像全部具有不同的纵横比。图像的不同长宽比使图像表看起来很混乱。

为了解决这个问题，我想剪裁需要裁剪的部分，使图像完全呈正方形。我已经用PHP脚本缩小了比例。

棘手的部分是，我只能使用HTML，CSS和PHP服务器端，其他一切都不支持。

那么有没有什么办法可以动态地，不知道图像作物的大小到一个正方形？

Answer 1

与指定的width和height（您所需的正方形的大小）有一个div，它的background-image设置为以未知大小为中心的图片。然后，它看起来像是“裁剪”，这意味着div的大小以外的每一个将不可见。

Answer 2

有使用HTML5多个选项：（您与HTML5标记这个，所以我认为你可以使用它）

1. 您可以使用图像功能，放大/缩小图片以所需的大小：

void drawImage(Object image, float dx, float dy, [Optional] float dw, float dh);

指定所需的宽度&高度，它会适当缩放图像，但如果有太多的缩放...你会看到明显的文物

或者

2可以使用同样的功能的另一种变体，你可以切片在通过DX，DY定义的目标由SX，SY，SW & sh和显示器定义的图像的一部分，DW & DH

void drawImage(Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)