css如何将一张图片截取为一个正方形?

Question

现在有一批图片，图片长宽比有大于1的也有小于1的，但图片无论长度还是宽度都大于200px，现在想要在浏览器上生成图片正方形的缩略图(200px*200px)，要分两种情况:
1.图片长度>宽度，即横条型图片:
压缩图片宽度为200px，长度等比自适应，长度多余部分overflow
2.图片宽度>长度，即竖条形图片:
压缩图片长度为200px，宽度等比自适应，宽度多余部分overflow

这个用纯前端应怎样实现？不知道我描述清楚没有一点但这种用法在实际应用中应该很常见吧

另外提醒一下SF官方，你们的cookie问题一直没解决啊，即使点了保存密码每天都要重新登陆我都忍了，刚刚手机客户端发问题打了一大段字，点击发布提示登陆超时。。。又得重新打字发布，不知我是不是个例现象，若不是还是快点把cookie问题解决了吧，作为一个程序员社区，cookie没法解决会被人业内贻笑大方滴

感谢各位回答，用js实现很简单，我想用纯css实现，并且，因为想设置图片alt属性，尽量不要把图片设置成background-image

Answer 1

background-position: center;
background-size: cover;

将<img src="xxx">改为<div style="background:url(xxx)">

http://jsbin.com/fedopolamu/edit?html,css,output

Answer 2

图片长度>宽度 不是应该是竖条型吗， 还有overflow是指什么 hidden?auto?scroll?

Answer 3

我觉得得用JS来判断，大概思路是：
大概结构就这样<div><img /></div>
1.外层div只是宽和高，并且设置overflow等样式
2.JS获取图片大小 判断 宽/高 比例 判断是否大于1 若大于1 则对宽设置宽度 若小于1 则对高度设置高度

Answer 4

我通常直接用CSS限制：

<span class="pic"><img src="img01.jpg" /></span>

.pic {
    display: inline-block;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
.pic img {
    max-width: 200px;
    max-height: 200px;
}

Answer 5

楼主试试这个能否实现？

http://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/

---

嗯，刚刚又找到一个可以在线编译的地址，挺不错的：

http://cool.techbrood.com/fiddle/9184

---

初学者，还没学到这儿，借此机会我也好好学学。。。

Answer 6

是否要居中截取呢？

Answer 7

<div class="imgbox">
    <img src="img.img">
</div>
<style type="text/css">
.imgbox{
width: 200px;
height: 0;
padding-bottom: 200px;
overflow: hidden;
}

.imgbox img {
width:200px;
min-height: 200px;
}
</style>

Answer 8

设置宽高，然后加一个新属性
object-fit: cover;