Eliminate unnecessary code by using a pure CSS method without any additional wrapper div:

img {
  object-fit: cover;
  width: 230px;
  height: 230px;
}

If the image is contained within a responsive element:

.responsive-img-container {
  position: relative;
}

.responsive-img-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.responsive-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="responsive-img-container">
  <img class="responsive-img" src="https://example.com/image.jpg" alt="Responsive Image">
</div>

(edit: CSS updated for better compatibility) (edit: Placeholder image added for illustration)

1. Firstly, place your image in a div.
2. Next, give your div specific square dimensions.
3. Now, set the CSS overflow property on the div to hidden (overflow:hidden).
4. Put your image inside the div.
5. Enjoy the results.

For instance:

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>

Here is an example of using the background-size:cover property: http://example.com/background-cover

Sample CSS:

.cover-image {
  background-image: url('https://example.com/image.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  width:300px;
  height:300px;
}  

HTML:

<div class="cover-image"></div>

Take a look at the CSS aspect-ratio property

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

.square-image{
  width: 50%;
  background-image: url('https://picsum.photos/id/0/367/267');
  background-size: cover;
  background-position: center;
  aspect-ratio: 1/1;
}

<div class="square-image"></div>

You can achieve the same effect using a standard img tag like this

.square-image{
  width: 50%;
  object-fit: cover; /* Use object-position property for adjustment of the visible area */
  aspect-ratio: 1/1;
}

<img src="https://picsum.photos/id/0/367/267" class="square-image"/>

Recently, I encountered a similar problem and took a different approach since I couldn't utilize background images. I had to use a bit of jQuery to determine the orientation of the images, but plain JS could work as well.

If you're curious about the solution I came up with, I wrote a blog post explaining it further. The code is quite simple:

HTML:

<ul class="cropped-images">
  <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
  <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>

CSS:

li {
  width: 150px; // Customize as needed
  height: 150px; // Customize as needed
  overflow: hidden;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
li img {
  max-width: 100%;
  height: auto;
  width: auto;
}
li img.landscape {
  max-width: none;
  max-height: 100%;
}

jQuery:

$( document ).ready(function() {

    $('.cropped-images img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});

Take advantage of aspect-ratio feature today:

div {
   aspect-ratio: 16 / 9;
}

This feature is well-supported by most modern browsers: https://caniuse.com/mdn-css_properties_aspect-ratio

Using object-fit: cover will achieve the desired effect.

However, it may not be compatible with IE/Edge. To ensure cross-browser functionality, you can implement the following pure CSS solution.

To center the image within the container, I utilized the following CSS properties: position: absolute, top: 50%, left: 50%, and transform: translate(-50%, -50%).

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

After centering the image, apply the following styles:

// For vertical images (height > width)
height: 100%;
width: auto;

// For horizontal images (width > height)
height: auto;
width: 100%;

These styles replicate the behavior of Object-fit: cover.

See the above technique in action.

https://jsfiddle.net/furqan_694/s3xLe1gp/

This method is compatible with all major browsers.

Original Image
https://i.sstatic.net/YkuCP.png

Vertically Cropped
https://i.sstatic.net/7wVxn.png

Horizontally Cropped
https://i.sstatic.net/WdJTE.png

Square Container https://i.sstatic.net/Cr8zu.jpg

I encountered a similar problem with background images and couldn't find a compromise. Here is the solution I came up with.

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.container {
    position: relative;
    width: 25%; /* adjust width as needed, I used this in a 4 tile grid pattern */
    border: 2px solid #fff; /* for image separation */
    overflow: hidden; /* to crop the image */
    background: #000; /* in case image aspect ratio is not square */
}

.container img {
    position: absolute;
    display: block;
    height: 100%; /* ensure all images fill the height */
    top: 50%; /* top, left, transform trick to center image vertically and horizontally */
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

//assuming jQuery is being used
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

I hope this solution proves helpful!

Check out the example in action here: https://jsfiddle.net/cfbuwxmr/1/

2023 Solution

img {
    width: 200px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

<img src="https://i.sstatic.net/GA6bB.png">

Implement CSS: overflow property

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}

To create a square div with the image inside, you can use the following CSS classes:

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

Alternatively, you can use a square div with the image as the background:

.test2 {
width: 307px;
height: 307px;
    background: url(https://i.sstatic.net/GA6bB.png) 50% 50%
}

For examples, check out this link: http://jsfiddle.net/QqCLC/1/

UPDATED TO CENTER THE IMAGE

.test {
  width: 307px;
  height: 307px;
  overflow: hidden
}

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(https://i.sstatic.net/GA6bB.png) 50% 50%
}

<div class="test"><img src="https://i.sstatic.net/GA6bB.png" width="460" height="307" class="testimg" /></div>

<div class="test2"></div>

I approached this task from a unique angle. Essentially, the goal is to resize a rectangular image to fit within a square frame by cropping it. My preferred method involves checking if the image's width is greater than its height. If so, I crop a bit from the left and right sides. If the height is greater than the width, I crop the bottom of the image. Here's how I tackled it, with a little assistance from PHP:

    <div style="position: relative; width: 154px; height: 154px; overflow: hidden;">
<?php 
        // Retrieve image dimensions using Imagick
        $image = new Imagick("myimage.png");
        $width = $image->getImageWidth();  
        $height = $image->getImageHeight(); 
        if($width > $height){
 ?>
        <img src="myimage.png" style="display: block; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); height: 100%; " />
 <?php
        }else{
 ?>
        <img src="myimage.png" style="display: block; position: absolute; top: 0px; left: 0px; width: 100%; " />
 <?php
        }
 ?>

    </div>