CSS: Как сделать картинку квадратной

Для вывода дополнительных картинок, в виде ссылок на них, стояла задача сделать все фото квадратными и одинаково размера. При этом сами картинки имеют абсолютно разные размеры. Фотографии резать или сжимать нельзя. Перво, что пришло на ум - это вставить в теги атрибут style, вот так:

<div style="display: inline-block; width: 165px;">
	<a style="display: block; background-image: url('{img server_id=$photo.server_id path='photo.url_photo' file=$photo.destination suffix='_240' return_url=true}'); background-position: 50% 25%; background-size: cover; height: 160px; width: 160px;" href="{permalink module='photo' id=$photo.photo_id}" title:"{$photo.title|clean}" rel="{$photo.photo_id}"></a>
</div>

Решил вставлять стили в теги, потому что используется свойство background-image: url(), а URL картинки постоянно меняется, и угадать его нельзя.

Тут:

background-image:
background-position: 50% 25%;
background-size: cover;

Отлично справляется с поставленной задачей. Но, я стараюсь не допускать CSS в HTML, по возможности убираю его в отдельный файл. Тогда было сделано так:

<div class="morePhoto">
	<a href="{permalink module='photo' id=$photo.photo_id}" title:"{$photo.title|clean}" rel="{$photo.photo_id}">{img server_id=$photo.server_id path='photo.url_photo' file=$photo.destination suffix='_240'}</a>
</div>

CSS:

.morePhoto {
	display: inline-block;
	width: 165px;
}

.morePhoto img {
	border-radius: 3px;
	object-fit: cover;
	height: 160px;
	width: 160px;
}

Готово. Кода меньше, эффект тот же.

Результат:
CSS: Как сделать картинку квадратной