如何计算最佳比例，使图像适合其容器

Question

我有一个尺寸为:

的容器

容器。宽度,container.height

和我有一个维度的图片:

图片。宽度,picture.height

我的目标是计算最佳比例，使图片适合容器(没有变形)

算法是如何得到比率的?

picture.width*=ratio;
picture.height*=ratio;

(图片已经处于容器中央)

Answer 1

按如下方法计算比例

var ratio:Number = Math.min(
    container.width / picture.width,
    container.height / picture.height);

然后将缩放比例均匀地应用于图片，使其适合容器。

picture.scaleX = picture.scaleY = ratio;

Answer 2

只有两种可能:要么使图片的宽度适合容器的宽度，要么使图片的高度适合容器的高度。试一试。对于每一个，计算缩放尺寸(宽度或高度)所需的比例，你拟合的容器，并使用它来缩放图片的其他尺寸:如果这导致图片尺寸超过相应的容器尺寸，那么这种可能性是无效的。

只有一种可能会工作，除非图片的宽高比等于容器的宽高比，在这种情况下，他们都可以(但他们将等于相同的东西)。

Answer 3

你可以这样做:

picture.width = container.width;
picture.scaleY = picture.scaleX;
if(picture.height > container.height)
{
    picture.height= container.height;
    picture.scaleX = picture.scaleY;
}

Answer 4

如果你不介意边框的话(比如:在方形容器中宽幅/风景图片使用黑色边框)

公式为:原宽度/原高度*新宽度=纵横校正新高度

在你的情况下，这将是:

image.height = (image.width / image.height) * container.width;

Alt版本:

image.width = container.width; 
image.height = container.width / (image.width / image.height);

Answer 5

你可以使用这个函数来返回你的图片的比例:

function scaleRatio(cw:Number, ch:Number, pw:Number, ph:Number):Number
{
    return (ch / cw > ph / pw) ? cw / pw : ch / ph;
}
picture.scaleX = picture.scaleY = scaleRatio(container.width, container.height, picture.width, picture.height);