下面介绍两种不使用到 JavaScript 就可以实现将照片展示为正方形的 CSS 方法。

1 巧用CSS3 object-fit

1
2
3
<div id="box">
    <img src="images/example.png>
</div>
1
2
3
4
5
6
7
8
9
10
#box {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

缺点：IE 浏览器不兼容。

2 将图片设置为背景图

1
2
<div id="box" style="{background-image:'url(images/example.png')}">
</div>
1
2
3
4
5
6
#box {
    width: 100px;
    height: 100px;
    overflow: hidden;
    background-size: cover;
}

缺点：没有完全分离掉文本和样式。