版权声明:本文为博主(风轻云淡)原创文章,未经博主允许不得转载。CSDN https://blog.csdn.net/qq_20343517/article/details/88972565
使用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>
可以看到不管如何调整窗口大小,图片始终保持正方形