Как сделать квадратные изображения?

Если пропорции не совпадают, то можно
1. растянуть
2. обрезать
3. повторять картинку
4. дополнить фоновым цветом/изображением.

Здесь в любом случае понадобится бекенд.

Как пример, можно определять ориентацию изображения и дальше от класса .horizontal или .vertical позиционировать через css (absolute, width/height: 100% - в зависимости от класса, left/top: 50% - в зависимости от класса, transform: translateX(-50%)/translateY(-50%) - тоже в зависимости от класса).
В таком случае оригинальные размеры изображения сохраняются (пользователь может его сохранить таким же).

Ну либо бекендом делать обычный crop.

Используйте конструкцию типа:

<div style="overflow: hidden; width: %ваш размер%; height: %ваш размер%">
<img src="..." />
</div>

Это поможет уместить картинки любого размера в слое.
overflow: hidden - обязательный параметр.