Мне нужно всегда обрезать изображение случайного размера до квадрата 160x160, используя только CSS. Изображения должны оставаться по центру при обрезке.
Моя разметка должна быть:
<a href="#" class="cropper">
<img src="image" alt="description" />
</a>
Поиск в Qaru Я нашел несколько ответов (например, CSS - Как обрезать изображение до квадрата, если оно уже квадратное, а затем изменить его размер), но они не работают в тех случаях, когда Ваше изображение может быть больше по горизонтали (широко) или по вертикали (высоко).
В частности, я должен быть в состоянии представить оба широких изображения, как это:
и высокое изображение, подобное этому:
в квадратной форме, не зная заранее, какой из них горизонтальный или вертикальный. Он также должен поддерживать уже квадратные изображения.