一个纯CSS解决方案，没有包装div或其他无用的代码:

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

实际上，我最近遇到了同样的问题，最后用了一个稍微不同的方法(我不能使用背景图像)。它确实需要一点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');        
      }
    });

});

现在你可以使用纵横比:

img {
   aspect-ratio: 1 / 1;
}

它在现代浏览器中也有广泛的支持: https://caniuse.com/mdn-css_properties_aspect-ratio

可以使用. testg类中的正方形尺寸的div:

.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 { 宽度:307 px; 身高:307 px; 隐藏溢出: ｝ .testimg { margin-left: -76像素 ｝ .test2 { 宽度:307 px; 身高:307 px; background: url(http://i.stack.imgur.com/GA6bB.png ｝ <div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class=" testg " /></div> < div class = " test2 " > < / div >

我用了不同的方法。你基本上需要裁剪矩形图像，使其适合正方形，这就是它的全部。最好的方法是如果图像宽度大于高度，那么你从图像的左边和右边稍微裁剪图像。如果图像高度大于图像宽度，则裁剪图像底部。这是我的解决方案。不过我需要PHP的一点帮助。

    <div style="position: relative; width: 154px; height: 154px; overflow: hidden;">
<?php 
        //get image dimmensions whichever way you like. I used imgaick
        $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>

查看CSS的纵横比

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

.square-image { 宽度:50%; 背景图片:url (https://picsum.photos/id/0/367/267); background-size:封面; 背景位置:中心; 比例:1/1; ｝ < div class = "方形图像“> < / div >

您也可以使用常规的img标签，如下所示

.square-image { 宽度:50%; object-fit:封面;/*需要防止图像拉伸，使用对象位置属性调整可见区域*/ 比例:1/1; ｝ < img src = " https://picsum。照片/ id / 0/367/267”class = "方形图像" / >