所以我有这种非常奇怪的情况。我有两个图标,288x288px。但第一个图标显示在应用程序中比另一个更大。
她是我的xml:
<GridLayout scaleX="1.0" scaleY="1.0" class="background" rows="auto, auto, auto, auto" columns="*, *">
<StackLayout colSpan="2">
<Image class="logo" stretch="none" src="res://logo"></Image>
</StackLayout>
<GridLayout colSpan="2" class="login-container" row="1" rows="auto, auto, auto, auto, auto" columns="*">
<StackLayout class="input-wrapper" row="0">
<TextField class="input" hint="Email" [(ngModel)]="email"></TextField>
</StackLayout>
<StackLayout class="input-wrapper" row="1">
<TextField class="input" hint="Password" [(ngModel)]="password"></TextField>
</StackLayout>
<Button colSpan="2" class="sign-in" row="3" cssClass="hello" (tap)="doLogin()" text="Sign in"></Button>
<StackLayout row="4">
<Label class="bottom-text" text="Forgot your password?"></Label>
</StackLayout>
</GridLayout>
<GridLayout colSpan="2" row="2" rows="100" columns="*, *">
<Image width="100" height="100" stretce="none" row="0" col="0" src="res://facebook"></Image>
<Image width="100" height="100" stretch="none" row="0" col="1" src="res://instagram"></Image>
</GridLayout>
<StackLayout colSpan="2" row="3">
<Label class="register" text="Are you new? Create a new account now!"></Label>
</StackLayout>
</GridLayout>
css部分: 。背景 { background-image:url(“res:// login_bg”); background-repeat:no-repeat; 背景尺寸:封面; 背景位置:中心; }
.logo {
horizontal-align: center;
margin-top: 130;
}
.login-container {
padding: 28;
background-color: #F5F5F5;
width: 100%;
}
.input {
width: 310;
border: none;
color: #BDBDBD;
background-color: #efefef;
}
.input-wrapper {
padding: 10;
background-color: #efefef;
margin-bottom: 4px;
}
button {
background-color: #22252b;
color: #ffffff;
height: 75;
width: 340;
vertical-align: center;
font-size: 13;
margin-top: 7;
}
.bottom-text {
horizontal-align: center;
}
.welcome-message {
font-size: 20;
}
.sign-in {
margin-bottom: 8px;
}
.social-button {
width: 100;
height: 100;
}
.register {
margin-top: 7px;
color: #ffffff;
}
以及2个图标:
有人有同样的问题吗?
答案 0 :(得分:8)
<Image width="100" height="100" stretch="aspectFill" row="0" col="0" src="res://facebook"></Image>
stretch="aspectFill"
做到了。感谢nativescript松弛的聊天!
编辑 - 固定拉伸的拼写拉伸
答案 1 :(得分:3)
要解决此问题,请确保在所有提供的可绘制资源文件夹中都有这两个图像(在 app / App_Resources / Android 中)并更改拉伸选项:
<Image width="100" height="100" stretch="aspectFit" row="0" col="0" src="res://facebook"></Image>
<Image width="100" height="100" stretch="aspectFit" row="0" col="1" src="res://instagram"></Image>
现在你的图像将居中并且尺寸相同。
编辑:还修正了strech