如何使图像自动调整大小，使宽度为 100% 并相应调整高度？

Posted 2023-02-26

【中文标题】如何使图像自动调整大小，使宽度为 100% 并相应调整高度？

【英文标题】：How can I make an image auto-resize so the width is 100% and the height adjusted accordingly?

【发布时间】：2017-07-18 20:26:14

【问题描述】：

我有以下简单的 XAML 页面：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test.UserGuides.***">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,10">
                <Label Margin="10,10,10,10" Text="How to connect to ***." HorizontalOptions="Center" />
                <Label Margin="10,10,10,10" Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
                <Image x:Name="img***1" Margin="10,10,10,10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
                <Label Margin="10,10,10,10" Text="Select your region and press the Connect button." />
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

在构造函数中，我调用了一个加载图片的方法：

private void LoadImages()

    img***1.Aspect = Aspect.AspectFit;
    ImageSource imagesrc = ImageSource.FromResource("Test.Files.CiscoAnyConnect.PNG");
    img***1.Source = imagesrc;

在我的（相当大的、高 DPI）手机上的结果如下所示：

imgur link 1

当然，我希望图像自动展开，以便占据整个屏幕宽度。在保持纵横比的同时。但我怎样才能做到这一点？我已经尝试将 Aspect 设置为“AspectFill”，并添加了

img***1.WidthRequest = Application.Current.MainPage.Width;

到 LoadImages 方法，但这使得最终结果看起来像这样：

imgur link 2

我一直在玩弄各种 Horizo​​ntalOptions、VerticalOptions、Aspects、GridView、StackLayouts，... 最终的结果总是第一个或第二个屏幕截图。那么我怎样才能在这里实现我想要的呢？

【问题讨论】：

你要试验的图片尺寸是多少？

@YuriS CiscoAnyConnect.PNG 图像的尺寸是 411x 191。如果我能得到这些值，将 HeightRequest 设置为纵横比很容易，但似乎几乎不可能做到使用我过去几个小时研究的 Xamarin.Forms。

你能把它贴在某个地方，这样我就不需要纠正类似的事情了吗？

没问题：imgur.com/Z487WqB

创建了 2 个错误。一个用于网格，一个用于 StackLayout。已确认但未修复的错误。如果您需要缩放图片，我会尝试使用相对布局。对不起bugzilla.xamarin.com/show_bug.cgi?id=27729 和bugzilla.xamarin.com/show_bug.cgi?id=55294

【参考方案1】：

这是可以做的。 XML 几乎没有变化，我只是删除了图像布局选项

<ContentPage.Content>
        <ScrollView>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,10">
                <Label Margin="10,10,10,10" Text="How to connect to ***." HorizontalOptions="Center" />
                <Label Margin="10,10,10,10" Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
                <Image x:Name="img***1" Margin="10,10,10,10" />
                <Label Margin="10,10,10,10" Text="Select your region and press the Connect button." />
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>

在以相对布局实现所有内容之后，这也并不简单（如果有人需要，我有代码，请告诉我）我找到了更简单的方法。关键是图像无法正确缩放并且在高度上占用了太多空间。但是我们知道这张图片的大小比例，所以我们可以使用它。在代码中我们需要重写 OnSizeAllocated 因为在构造函数中宽度是未知的。然后就很简单了

protected override void OnSizeAllocated(double width, double height)

    base.OnSizeAllocated(width, height);
    img***1.WidthRequest = width;
    img***1.HeightRequest = width / 2.152; //given that image is 411 x 191

如果你愿意，你可以使用页面以外的其他宽度。例如，您可以使用堆栈布局宽度来考虑边距以提高准确性，但这已经在调整。或者你实际上可以像这样使用图像宽度本身

 protected override void OnSizeAllocated(double width, double height)
 
     base.OnSizeAllocated(width, height);
     double needHeight=img***1.Width / 2.152;
     if (img***1.Height != needHeight)
         img***1.HeightRequest = needHeight;
 

【讨论】：

嗨 Yuri S。谢谢你。事实上，我还设法通过手动指定 HeightRequest 来半修复/解决该问题。但是，要使其正常工作，您需要知道图像的尺寸或纵横比。而且由于您似乎无法以编程方式获取它们，因此您需要对每个图像进行硬编码。无论如何，我感谢你的帮助。我认为这将是目前唯一的方法。我将在我的项目中测试您的解决方案。

您的图片在哪里？如果他们在资源中，您会提前知道比率。如果他们下载了，您可能会找出比例。

谢谢！我几乎花了一整天的时间来解决这个问题！

@primehalo 很高兴它有帮助

在我看来，这对于 Xamarin Forms 来说是一个巨大的尴尬，因为这必须通过代码以这种 hacky 的方式来完成。更不用说这仅在图像大小已知时才有效。

【参考方案2】：

这就是你需要的。

<ContentPage.Content>
    <ScrollView>
        <StackLayout Margin="20" Spacing="10">
            <Label Text="How to connect to ***." HorizontalOptions="Center" />
            <Label Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
            <Image Source="yourimage.jpg" HorizontalOptions="Fill" />
            <Label Text="Select your region and press the Connect button." />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

【讨论】：

不幸的是，这只是从第一个屏幕截图中产生的结果。

@Matthias 它对我来说工作正常。您使用的是哪个版本的 XF？它是在 android 还是 ios 上复制的？

或者可以尝试使用我的代码在您的图像上设置 WidthRequest=2000？