Ако приемем, че не е задължително да са в IMG тагове...

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

РЕДАКТИРАНЕ: Ако div трябва да се свърже някъде, просто коригирайте HTML и стилове така:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

Обърнете внимание, че това също може да бъде променено, за да реагира, например % ширини и височини и т.н.

Чисто CSS решение без обвивка div или друг безполезен код:

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

1. Поставете вашето изображение в div.
2. Дайте на вашия div изрични квадратни размери.
3. Задайте свойството за препълване на CSS на div на скрито (overflow:hidden).
4. Поставете въображението си в div.
5. печалба.

Например:

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

Ако изображението е в контейнер с отзивчива ширина:

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

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

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

<div class="rect-img-container">
  <img class="rect-img" src="https://picsum.photos/id/0/367/267" alt="">
</div>

(редактиране: актуализиран от sass към обикновен css) (редактиране: Добавено фиктивно изображение за справка)

Използване на background-size:cover - http://codepen.io/anon/pen/RNyKzB

CSS:

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}  

Маркиране:

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

Всъщност наскоро се натъкнах на същия проблем и в крайна сметка използвах малко по-различен подход (не можах да използвам фонови изображения). Въпреки това изисква малко jQuery, за да се определи ориентацията на изображенията (сигурен съм, че вместо това можете да използвате обикновен JS).

Написах публикация в блог за това, ако се интересувате в повече обяснения, но кодът е доста прост:

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; // Or whatever you want.
  height: 150px; // Or whatever you want.
  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');        
      }
    });

});

object-fit: cover ще направи точно това, от което се нуждаете.

Но може да не работи на IE/Edge. Следвайте както е показано по-долу, за да го коригирате с само CSS, за да работи на всички браузъри.

Подходът, който предприех, беше да позиционирам изображението вътре в контейнера с absolute и след това да го поставя точно в центъра с помощта на комбинацията:

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

След като е в центъра, давам на изображението,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Това прави изображението да получи ефекта на Object-fit:cover.

Ето една демонстрация на горната логика.

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

Тази логика работи във всички браузъри.

Оригинално изображение

Вертикално изрязано

Хоризонтално изрязано

Имах подобен проблем и не можах да направя "компромис" с фонови изображения. Измислих това.

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

.container {
    position: relative;
    width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff; /* just to separate the images */
    overflow: hidden; /* "crop" the image */
    background: #000; /* incase the image is wider than tall/taller than wide */
}

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

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

Надявам се това да помогне!

Пример: https://jsfiddle.net/cfbuwxmr/1/

Използвайте CSS: препълване:

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

Вижте CSS aspect-ratio

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>

NB: ВСЕ ОЩЕ НЕ СЕ ПОДДЪРЖА В MOZILLA FIREFOX (КЪМ 13 април 2021 г.)

Или използвайте div с квадратни размери с изображението вътре с класа .testimg:

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

.testimg {
    margin-left: -76px

}

или квадратен div с фон на изображението.

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

Ето няколко примера: http://jsfiddle.net/QqCLC/1/

АКТУАЛИЗИРАНО ТАКА, ЧЕ ЦЕНТРОВЕТЕ НА ИЗОБРАЖЕНИЕТО

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

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

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