数学/算法使图像适应屏幕保留纵横比 [英] math/algorithm Fit image to screen retain aspect ratio

问题描述

我需要数学/算法方面的帮助来拍摄已知尺寸并适合两个屏幕尺寸之一的图像:

I need help with math / algorithm to take an image of known size and fit to one of two screen dimensions:

720 x 480 或 1280 x 1024.

720 x 480 or 1280 x 1024.

图像尺寸来自 XML 文件，但这些尺寸是 Web 尺寸，我还从 XML 中选择了一些图像，这些图像的分辨率可能高于或低于 Web 尺寸.

The image dimensions are coming from an XML file, however those dimensions are the web dimensions, I also get a selection of images from the XML that may be of higher and lower resolution than the web dimensions.

我想要的是使用网页尺寸的纵横比在 HD (1280x720) 屏幕上显示更高分辨率的图像(如果可用)，或者，如果用户在 SD 屏幕 (720x480) 上显示图像在那个屏幕上.

What I want is to use the aspect ration of the web dimensions to display the higher resolution image, if available, on an HD (1280x720) screen, or, if the user is on an SD screen (720x480) display the image on that screen.

如果我知道图像在两个维度上的分辨率都小于 SD 屏幕(在这种情况下，我只知道网络维度，并且图像文件的水平尺寸)，以在该屏幕上显示为实际尺寸.

Other things that would be useful for this, but lower priority, would be, if I know the resolution of the image is smaller in both dimensions than an SD screen (in this case, all I know is the web dimension, and the horizontal dimension of the image file), to display it as actual size on that screen.

希望足够清楚.

谢谢！

推荐答案

尽可能通用:

图像数据:(w_i, h_i) 并定义 r_i = w_i/h_i
屏幕分辨率:(w_s, h_s) 并定义 r_s = w_s/h_s

Image data: (w_i, h_i) and define r_i = w_i / h_i
Screen resolution: (w_s, h_s) and define r_s = w_s / h_s

缩放图像尺寸:

rs > ri ? (wi * hs/hi, hs) : (ws, hi * ws/wi)

例如:

         20
|------------------|
    10
|---------|

--------------------     ---   ---
|         |        |      | 7   |
|         |        |      |     | 10
|----------        |     ---    |
|                  |            |
--------------------           ---

ws = 20
hs = 10
wi = 10
hi = 7

20/10 > 10/7 ==> (wi * hs/hi, hs) = (10 * 10/7, 10) = (100/7, 10) ~ (14.3, 10)

你可以清楚地看到屏幕尺寸的比例，因为高度是屏幕的高度，但清楚地保持纵横比，因为14.3/10 ~ 10/7

Which as you can see clearly scales to the screen size, because the height is that of the screen but clearly keeps aspect ratio since 14.3/10 ~ 10/7

更新

按如下方式居中图像:

调用 (w_new, h_new) 新维度.

call (w_new, h_new) the new dimensions.

top = (hs - hnew)/2
left = (ws - wnew)/2

这篇关于数学/算法使图像适应屏幕保留纵横比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！