如何自动缩放所有分辨率的图像? [英] How to auto scale an image for all resolutions?

问题描述

我的应用的一个页面中有两张图片，一张是固定的框架，另一张会不时变化.

There are two images in a page of my app, one is a fixed frame and the other will change time to time.

我希望针对所有分辨率(WVGA、WXGA、720p)自动缩放页面.所以根据文档 我不应该设置数字，而是使用 "Auto" 或 "*" 为所有分辨率自动缩放.好的，这对框架有好处，但是内部图片呢?我怎样才能将它设置为在边缘的距离内正好在框架内?

I want the page to be auto scaled for all resolutions (WVGA,WXGA, 720p). So according to the documentation I should not set numbers but use "Auto" or "*" to be auto scaled for all resolutions. Ok this is good for frame, but what about the inner picture? how can I set it to be in a distance of the edges to be exactly inside the frame?

<Image Name="Frame" Source="/MyApplication;component/Assets/Frame.png" HorizontalAlignment="Left" Height="auto" VerticalAlignment="Top" Width="auto"/>
<Image Name="InnerImage" Source="/MyApplication;component/Assets/Pages/10.png" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Width="Auto" Margin="33,40,33,40"/>

推荐答案

无论分辨率如何，您的应用仍会看到 800x480(或 16:9 为 853)的逻辑像素，因此您的图像大小不会改变.那篇文章只讨论了提供更高分辨率的图像，以便在更高分辨率的屏幕(通常尺寸更大)上查看图像时具有更好的质量.尽管无论屏幕分辨率如何，它们在布局和大小方面都将保持不变.

Regardless of the resolution your app still sees logical pixels of 800x480 (or 853 for 16:9), so your image size will not change. That article only talks about providing higher resolution images so that the images, when viewed on a higher res screen (which is often larger in size) is of better quality. In terms of layout and size though they will remain the same regardless of screen resolution.

要对此进行测试，请向您的应用添加一个图像，并在多个不同尺寸的模拟器上运行它，您会发现无论屏幕分辨率如何，它的相对尺寸都保持不变.

To test this add an image to your app and run it across multiple emulators with different sizes and you'll see that it stays the same relative size regardless of screen resolution.

这篇关于如何自动缩放所有分辨率的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！