css怎样将图片设置成正方形，而且随着浏览器窗口大小的改变而自适应缩放

效果图如下:

代码实例如下:

 
  
  
  
  
  
  Document

	.one {
		width:80%;
		height:120%;
		/*去掉圆点*/
		list-style:none;
		/*居中对齐*/
		text-align:center;
		/*将系统自动生成的间隙去掉*/
		font-size:0;
		/*相对于body设置位置*/
		position:absolute;
		margin-top:100px;
		margin-left:100px;
	}
    .one ul li a {
    	/*相对定位*/
		position:relative;	 
		/*因为a为行内元素不支持宽和高，div为块级元素支持宽和高，所以要将行内元素转换为行内块级元素*/
		display:inline-block;
		/*图片随浏览器的大小自适应缩放，只设置宽度即可*/
		width:8%;
		/*使用 padding-bottom 设置高度基于宽度的自适应*/
		padding-bottom:8%;
		/*设置一个外边距*/
		margin:5px;
	}
	.one ul li a img {
		/*绝对定位*/
		position:  absolute;
		/*因为img为行内元素不支持宽和高，div为块级元素支持宽和高，所以要将行内元素转换为行内块级元素*/
		display:inline-block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
  
 
 
  

		

			

				/*这里的图片要跟此html网页放到同一个文件夹下*/
				
				
			
		
	
 

如果要转载的话，请附上博客地址: https://blog.csdn.net/qq_43290288/article/details/103046856