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（）＆＃39。相反，我设置了变量$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以获取您已请求的维度的自定义按钮

.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>

缩放按钮以保持背景图像上的方面

1 个答案: