如何动态调整CSS按钮精灵（背景图片）的大小？

Question

使用CSS，如何使按钮图像background: url();相对于父div缩小？父div居中并根据视口宽度vw设置为缩放。
有什么想法吗？

EDIT 这里重要的是缩放到视口宽度，而不是父div。

＆＃13;

＆＃13;

   body {
		background-color: rgb(0,0,0);
		margin: 0px; 
		border: 0px black;
		padding: 0px;
		}

	#parent {
		background-color: grey;
		width: 80vw;
		font-size: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);					
		display: flex;
		align-items:center;
		justify-content: center;				
	    }

		a{
		height: 200px;
		display: flex;				
		}		

   	        #alpha a{            	           
		width: 200px;   
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0;      	
	    }	
    
   		#alpha a:hover {           	           
		width: 200px;   
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 200px 0;            
	    }            

   	        #beta a{                       
		width: 200px;   
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0;     	
        } 

      	#beta a:hover {           
		width: 200px;   
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 200px 0;                
	    }

＆＃13;

<div id=parent>	

    <div id="alpha"><a href="#"></a>
    </div>
    <div id="beta"><a href="#"></a>
    </div>
  
</div>	
</body>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以使用背景大小设置它，因为你的图像和按钮一样高但是宽度的两倍，你可以使用'background-size：200％100％;'

然后将图像“切换”到下一个图像，您可以将位置更改为100％

body {
		background-color: rgb(0,0,0);
		margin: 0px; 
		border: 0px black;
		padding: 0px;
		}

	#parent {
		background-color: grey;
		width: 80vw;
		font-size: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);					
		display: flex;
		align-items:center;
		justify-content: center;				
	    }

		a{
		height: 100px;
		display: flex;				
		}		

   	        #alpha a{            	           
		width: 100px;   

		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0;
            background-size:200% 100%;
 
	    }	
    
   		#alpha a:hover {           	           
		width: 100px;   
 
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0;      
       background-size:200% 100%;
	    }            

   	        #beta a{                       
		width: 100px;   
   
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png")0 0;
      background-size: 200% 100%;

        } 

      	#beta a:hover {           
		width: 100px;

		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0; 
        background-size:200% 100%;
       
	    }

<div id=parent>	

    <div id="alpha"><a href="#"></a>
    </div>
    <div id="beta"><a href="#"></a>
    </div>
  
</div>	
</body>