Динамическая обрезка HTML

Question

У меня сейчас проблемы с отображением изображений в таблице.

Все изображения имеют разные пропорции. Различные пропорции изображений делают таблицу изображений выглядящей загроможденной.

Чтобы решить эту проблему, я хотел бы обрезать часть, которая требует обрезки, чтобы изображение было точно квадратным. У меня уже есть масштабирование с помощью PHP-скрипта.

Сложность в том, что я могу использовать только серверы HTML, CSS и PHP, все остальное не поддерживается.

Так есть ли способ, которым я могу динамически, не зная размера изображения обрезать в квадрат?

Answer 1

Имейте div с указанными width и height (размер нужного вам квадрата), с background-image, установленным на изображение с неизвестным размером по центру.Тогда будет казаться, что изображение «обрезано», что означает, что все, что находится вне размера div, не будут видны.

Answer 2

Существует несколько вариантов использования HTML5: (вы пометили это HTML5, поэтому я предполагаю, что вы можете его использовать)

1. Вы можете увеличить / уменьшить изображение до желаемого размера, используя функцию изображения:

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

Укажите необходимую ширину и высоту, и изображение будет соответствующим образом масштабировано, хотя, если масштабирование слишком велико ... вы увидите очевидные артефакты

Или

2 Вы можете использовать другой вариант той же функции, где вы можете нарезать часть изображения, определенную с помощью sx, sy, sw & sh, и отобразить в месте назначения, определенном как dx, dy, dw & dh

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