缩放比例按钮保持背景图像

Question

我试图适当缩放我的按钮的高度，以便background-image根据按钮的新宽度正确填充整个图像。

这里是我使用的代码不工作。

.auth-button { 
    background: rgba(0, 0, 0, 0); 
    background-image: url(../img/auth/facebook-connect.png); 
    background-size: cover; 
    background-repeat: no-repeat; 
    border: none; 
    padding: none; 
    width: 90vw; 
    height: calc(calc(161/953) * 90vw); 
    max-width: 953px; 
    max-height: 161px; 
} 

请注意，我使用的是SCSS，所以实际上没有任何嵌套的calc（）。在代替我有一个可变设置$authButtonAspect: calc(161/953)和做height: calc($authButtonAspect * 90vw)

最终，这应的多个图像（90％的垂直宽度）由纵横比的新的宽度和给一个新的高度，但..它不。

161是背景图像的高度，953是背景图像的宽度。

编辑是的，我知道我可以在Javascript中做到这一点，寻找一个CSS解决方案。要记住

Answer 1

关键点时创建与背景图像的响应按钮是，

填充是基于所述宽度总是计算。

由于无法以百分比计算高度，请使按钮的高度等于zero，然后通过填充顶部或底部控制按钮显示高度。

当按钮周围的父元素调整大小并在那里增加按钮宽度时，将根据元素的当前大小生成相应的填充顶部计算。

通过以上信息，我们可以创建一个使用CSS一个响应按钮如下图所示

a.img-btn 
{ 
    background:url("../mybutton.jpg"); 
    width:50%; 
    padding-top:50%; //Same width and padding will create a square 
    height:0; 
} 

您可以查看更多关于maintaining aspect ratio在这里

检查的尺寸自定义按钮样品CSS，你“VE要求

.btn{ 
 
background:transparent url("http://placehold.it/953x161") no-repeat 0 0; 
 
    background-size:100% auto; 
 
    width:75%; 
 
    padding-top:13%; 
 
    height:0; 
 
    display:inline-block; 
 
    text-align:center; 
 
} 
 

 
.btn span{display:none;}

<a href="#" class="btn"><span>Test</span></a>