html - How to center and crop an image to always appear in square shape with CSS?

Question

I need to always crop a random-sized image to a square 160x160 using only CSS. The images should stay centered when cropped.

My markup should be:

<a href="#" class="cropper">
   <img src="image" alt="description" />
</a>

Searching on StackOverflow I've found some answers (such as CSS - How to crop an image to a square, if it's already square then resize it), but they don't work for cases where your image can be larger horizontal (wide) OR vertical (tall).

Specifically, I need to be able to present both a wide image like this:

and a tall image like this:

in square form, without knowing in advance which one is a horizontal rectangle or a vertical rectangle. It should also support already squared images.

Answer 1

jsFiddle Demo

div {
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

<div>
    <img src="https://i.postimg.cc/TwFrQXrP/plus-2.jpg" />
</div>