ffimageloading:CachedImage图像不适合网格

Question

enter image description here

有什么建议可以让我的图像适合网格吗？下面是我的代码。

      <Grid   HorizontalOptions="FillAndExpand"
           VerticalOptions="FillAndExpand">
          <Grid.ColumnDefinitions>
           <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition  Height="Auto" />
                        </Grid.RowDefinitions>
                        <ffimageloading:CachedImage 
                            x:Name="mainImage"  
                            Source="{Binding Image1}" 
                            LoadingPlaceholder= "LoaderImage"
                            ErrorPlaceholder= "{Binding Image2}"
                            CacheDuration= "50"
                            RetryCount= "3"
                            RetryDelay= "600"
                            DownsampleToViewSize = "true"                               
                            Grid.Column="0" 
                            WidthRequest="380" 
                            HeightRequest="380" 
                            Aspect="AspectFit">
                            <ffimageloading:CachedImage.Transformations>
                                <fftransformations:RoundedTransformation Radius="20"/>
                            </ffimageloading:CachedImage.Transformations>
                        </ffimageloading:CachedImage>
                    </Grid>

有什么建议可以让我的图像适合网格吗？

Answer 1

Result

尝试以下代码：

<StackLayout>
        <Label Text=" Product Detail" Padding="10, 10, 10, 0"/>
        <StackLayout Padding="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Frame HasShadow="False" VerticalOptions="Fill" CornerRadius="5" Padding="1" BackgroundColor="#000000">
            <Frame HasShadow="False" CornerRadius="5" BackgroundColor="White" Padding="0">
                <Grid Padding="10, 0, 10, 0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="7*"/>
                <RowDefinition Height="2*"/>
            </Grid.RowDefinitions>
                    <Label Text="Jeep Rubicon" Grid.Row="0"/>
            <ffimageloading:CachedImage
                Grid.Row="1"
                x:Name="mainImage"
                Source="https://www.gannett-cdn.com/presto/2020/09/02/PDTN/f135eddc-5024-42ed-99e5-3f11ca3a5a7e-jeep_close.jpg"
                LoadingPlaceholder= "LoaderImage"
                CacheDuration= "50"
                RetryCount= "3"
                RetryDelay= "600"
                DownsampleToViewSize = "true"
                Aspect="AspectFit">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:RoundedTransformation Radius="20"/>
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>
            <StackLayout Grid.Row="2" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="20">
                <ffimageloading:CachedImage
                Source="https://www.gannett-cdn.com/presto/2020/09/02/PDTN/f135eddc-5024-42ed-99e5-3f11ca3a5a7e-jeep_close.jpg"
                LoadingPlaceholder= "LoaderImage"
                CacheDuration= "50"
                RetryCount= "3"
                RetryDelay= "600"
                DownsampleToViewSize = "true"
                Aspect="AspectFit">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:RoundedTransformation Radius="20"/>
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>

                <ffimageloading:CachedImage
                Source="https://www.gannett-cdn.com/presto/2020/09/02/PDTN/f135eddc-5024-42ed-99e5-3f11ca3a5a7e-jeep_close.jpg"
                LoadingPlaceholder= "LoaderImage"
                CacheDuration= "50"
                RetryCount= "3"
                RetryDelay= "600"
                DownsampleToViewSize = "true"
                Aspect="AspectFit">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:RoundedTransformation Radius="20"/>
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>

                <ffimageloading:CachedImage
                Source="https://www.gannett-cdn.com/presto/2020/09/02/PDTN/f135eddc-5024-42ed-99e5-3f11ca3a5a7e-jeep_close.jpg"
                LoadingPlaceholder= "LoaderImage"
                CacheDuration= "50"
                RetryCount= "3"
                RetryDelay= "600"
                DownsampleToViewSize = "true"
                Aspect="AspectFit">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:RoundedTransformation Radius="20"/>
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>
            </StackLayout>
            </Grid>
            </Frame>
        </Frame>
            </StackLayout>
    </StackLayout>

Answer 2

问题是由您设置的WidthRequest="380"和HeightRequest="380"引起的。

图像的高度大于宽度。

因此，给出一个合适的WidthRequest，HeightRequest就会像这样解决这个问题：

 WidthRequest="320" 
 HeightRequest="480" 

更新

<Grid   HorizontalOptions="FillAndExpand"
       VerticalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition  Height="Auto" />
    </Grid.RowDefinitions>
    <ffimageloading:CachedImage  BackgroundColor="Red"
                        x:Name="mainImage"  
                        Source="logo.jpg" 
                        CacheDuration= "50"
                        RetryCount= "3"
                        RetryDelay= "600"
                        DownsampleToViewSize = "true"                               
                        Grid.Column="0" 
                                                                    
        Aspect="AspectFit">

    </ffimageloading:CachedImage>
</Grid>