如何让一个百分比宽的盒子宽高一样

<!--一个盒子放4张图片,让图片的宽高一样,可自适应盒子宽度  使用padding和 position定位-->
	<ul>
		<li><p><img src="" /></p></li>
		<li><p><img src="" /></p></li>
		<li><p><img src="" /></p></li>
		<li><p><img src="" /></p></li>		
	</ul>
<style>
		ul{
			width:100%;
		}
		li{
			width: 23%;
            margin: 10px 1%;
            float: left;
		}
		p{
		  width: 100%;
          height: 0;
          padding-bottom: 100%;
          position: relative;
          overflow: hidden;
		}
		img{
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
          }
	</style>

猜你喜欢

转载自blog.csdn.net/qq_37144354/article/details/80360726