使用css很容易将图片设置为正方形,只要宽高相等即可,但如果图片的宽度是一个百分比呢,比如50%,那么就用到了下面的方法了。
<div class="wrap">
<div class="div">
<img src="a.jpg">
</div>
</div>
<style>
.wrap{
width:50%;
}
.div{
width:100%;
height:0;
padding-bottom:100%;
position:relative;
}
.div img{
width:100%;
height:100%;
position:absolute;
border: 1px solid red;
}
</style>
可以看到不管如何调整窗口大小,图片始终保持正方形