使用HTML按钮的自定义图标

Question

我正在使用IONIC 2构建移动应用程序，并具有以下按钮组。其中三个使用标准的Ionicons资源。但是，第三个使用键的自定义图像，但正如您所看到的，它没有适当缩放。

这是我的代码：

SCSS：

  .buttons .key { 
      background-color: #de574b;       
      transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -o-transform:rotate(45deg); 
  }

  .ion-ios-key::before, .ion-md-key::before {
      max-height: 20px;
      align-content: center;
      vertical-align: center;
      content: url('../../img/Key.png');
    }

HTML：

 <div class="buttons">
      <button class="bluetooth">
        <ion-icon name="bluetooth"></ion-icon>
      </button>

      <button class="help">
        <ion-icon name="md-help"></ion-icon>
      </button>

      <button class="key">
        <ion-icon name="key"></ion-icon>
      </button>

      <button class="new" (click)="newDevice()">
        <ion-icon name="md-add"></ion-icon>
      </button>
  </div>

我的max-height属性没有做任何事情，也没有高度属性。如何设置此图标的样式以使其看起来像其他图标？

Answer 1

align-content仅适用于display: flex，flex-direction: column和flex-flow: row wrap（在特定情况下）。

尝试：

.ion-ios-key, .ion-md-key {
      line-height: 20px;
      vertical-align: center;
      background: url('../../img/Key.png')no-repeat;
      background-size: contain;
    }

删除：

.ion-ios-key::before, .ion-md-key::before {
      max-height: 20px;
      align-content: center;
      vertical-align: center;
      content: url('../../img/Key.png');
    }

background-size: contain;将自动居中并扩展它以保持其纵横比（即最大宽度和高度而不变形），加上没有像原始代码那样的剪裁。如果您对其位置不满意，请使用background-position: center或background-position: 45% 45% *

* 45％45％只是一个用作示例的任意值。