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

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

查看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 = "方形图像" / >

适合对象:封面正好可以满足你的需要。

但它可能无法在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%;

这使得图像得到对象适合:覆盖的效果。

下面是上述逻辑的演示。

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

这种逻辑适用于所有浏览器。

原始图像

垂直剪裁

水平的剪裁

方形容器

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

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