如果图像在一个具有响应宽度的容器中:

.rect-img-container { 位置:相对; ｝ {后.rect-img-container:: 内容:“”; 显示:块; padding-bottom: 100%; ｝ .rect-img { 位置:绝对的; 宽度:100%; 高度:100%; object-fit:封面; ｝ < div class = " rect-img-container”> <img class="rect-img" src="https://picsum。照片/ id / 0/367/267”alt = " " > < / div >

(编辑:从sass更新为纯css) (编辑:添加了虚拟图像供参考)

假设它们不必出现在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 }

注意，这也可以修改为响应，例如%宽度和高度等。

可以使用. 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 >

使用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>

使用CSS: overflow:

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

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