Nativescript - 图像没有调整大小

时间:2016-08-10 09:40:59

标签: css nativescript

所以我有这种非常奇怪的情况。我有两个图标,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;
}

how it looks

以及2个图标:

instagram facebookk

有人有同样的问题吗?

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

的拼写