我正在使用 IONIC 2 构建移动应用程序,并具有以下一组按钮。其中三个使用标准的 Ionicons 资源。然而,第三个使用了自定义的按键图像,但如您所见,它没有适当缩放。
这是我的代码:
CSS:
.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
属性没有任何作用,height 属性也没有。我如何设置此图标的样式以使其看起来像其他图标一样?
最佳答案
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% 只是用作示例的任意值。
关于html - 为 HTML 按钮使用自定义图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35985013/