第十三章：位图（二）

适合和填充
如果在任何先前的代码和XAML示例上设置Image的BackgroundColor属性，您将看到Image实际占据页面的整个矩形区域。 Image定义了一个Aspect属性，用于控制位图在此矩形内的呈现方式。 您将此属性设置为Aspect枚举的成员：

• AspectFit - 默认值
• Fill - 拉伸而不保留纵横比
• AspectFill - 保留纵横比但裁剪图像

默认设置是枚举成员Aspect.AspectFit，这意味着位图适合其容器的边界，同时保留位图的宽高比。 正如您已经看到的，位图的尺寸与容器尺寸之间的关系可能导致顶部和底部或左右两侧的背景区域。
在WebBitmapXaml项目中尝试这个：

<Image Source="https://developer.xamarin.com/demo/IMG_3256.JPG"
       Aspect="Fill" />

现在位图扩展到页面的尺寸。 这导致图片垂直拉伸，因此汽车显得相当短而且很粗壮：

如果您将手机侧向转动，图像会水平拉伸，但结果并不是那么极端，因为图片的纵横比在某种程度上是开始的。
第三个选项是AspectFill：

<Image Source="https://developer.xamarin.com/demo/IMG_3256.JPG"
       Aspect="AspectFill" />

使用此选项，位图完全填充容器，但位图的宽高比保持在同一时间。 唯一可行的方法是裁剪部分图像，然后您会看到图像确实被裁剪，但在三个平台上以不同的方式裁剪。 在iOS和Android上，图像在顶部和底部或左右两侧裁剪，只留下位图的中心部分可见。 在Windows运行时平台上，图像在右侧或底部裁剪，左上角可见：