嵌入式图像超出布局的宽度约束（RelativeLayout）

我在相对布局中嵌入了图像资源的问题 . 即使图像本身很大，它也能完美地缩放，但不知何故，它的宽度超出了布局中给定的宽度约束 .

以下代码显示了相关布局与图像（Koala.jpg）的问题：

<RelativeLayout HorizontalOptions="Center"  HeightRequest="100" x:Name="HotelButton"  BackgroundColor="Orange" Opacity="0.5"
                                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MenuStack,Property=Width, Factor=0.2}" >

                            <Image Source="{local:ImageResource TestUIPCL.images.Koala.jpg}"  VerticalOptions="Center"
                                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=HotelButton Property=Width, Factor=1}" />

                            <Label x:Name="lblTheHotel" TextColor="White" Text="THE HOTEL" HorizontalOptions="Center" Margin="0,0,0,0" YAlign="Start"></Label>
                        </RelativeLayout>

image exceeds defined layout width

当插入图像时，“HotelButton”RelativeLayout堆栈在其定义的宽度约束（到MenuStack布局）上另外扩展 . 正如您在背景中看到的“红色”布局用于制作和标记菜单限制，酒店按钮和配置文件按钮应在背景中的“红色”布局内 . 但是当为Hotel Button插入图像时，它会将“配置文件”按钮推出“红色”布局的界限 .

注意，酒店按钮和配置文件按钮应该是相同的大小 - 相同的宽度 . 酒店按钮标有“橙色”颜色，以便更好地澄清 .

为什么在布局中插入图像时会发生这种情况？为什么图像本身没有在布局的定义宽度约束（Hotel按钮）内缩放？

在嵌入这样的图像时，我应该使用不同的布局类型或布局组合吗？欢迎任何建议和更正 . 谢谢！

完整的XAML代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TestUIPCL;assembly=TestUIPCL"
             x:Class="TestUIPCL.Page1">

    <RelativeLayout VerticalOptions="Fill"
                    HorizontalOptions="Fill" x:Name="backrel"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0}" >

        <RelativeLayout VerticalOptions="Fill"
                        HorizontalOptions="Fill" x:Name="backmenu"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=backrel,Property=Width, Factor=0.5}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0.4}" BackgroundColor="Black">

            <StackLayout Orientation="Vertical" x:Name="MainStack" Margin="0,0,0,0" HorizontalOptions="Fill"
                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=1}" BackgroundColor="Red">

                <StackLayout VerticalOptions="Center" HorizontalOptions="Center"  HeightRequest="150" Margin="0,20,0,0"  x:Name="LogoStack" BackgroundColor="Black">
                    <Image Source="{local:ImageResource TestUIPCL.images.logo.png}"  Margin="0,0,0,0" VerticalOptions="CenterAndExpand"  />
                </StackLayout>

                <StackLayout Orientation="Horizontal" x:Name="MenuStack"  HeightRequest="150"
                             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainStack, Property=Width, Factor=0.2}">

                    <RelativeLayout HorizontalOptions="Center"  HeightRequest="100" x:Name="HotelButton"  BackgroundColor="Orange" Opacity="0.5"
                                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MenuStack,Property=Width, Factor=0.2}" >

                        <Image Source="{local:ImageResource TestUIPCL.images.Koala.jpg}"  VerticalOptions="Center"
                               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=HotelButton Property=Width, Factor=1}" />

                        <Label x:Name="lblTheHotel" TextColor="White" Text="THE HOTEL" HorizontalOptions="Center" Margin="0,0,0,0" YAlign="Start"></Label>
                    </RelativeLayout>

                    <StackLayout HorizontalOptions="CenterAndExpand"  HeightRequest="100" x:Name="ProfileButton"  BackgroundColor="Black" Opacity="0.5">
                        <Image Source="{local:ImageResource TestUIPCL.images.logohotel.png}" VerticalOptions="Center" Margin="0,0,0,0"/>
                        <Label x:Name="lblProfile" TextColor="White" Text="PROFILE" HorizontalOptions="Center" Margin="0,2,0,0" YAlign="Start"></Label>
                    </StackLayout>


                </StackLayout>
            </StackLayout>

        </RelativeLayout>
    </RelativeLayout>

</ContentPage>