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)