JavaScript图像尺寸调整计算 [英] Javascript Image Resize Calculation

问题描述

假设我有一张1920 x 1280的图像.

Let's say I have an image that is 1920 x 1280.

我正在使用滑块将图像缩小，从100％缩小到0％，其中100％是原始尺寸，0％是最小尺寸.

I'm using a slider to scale down the image, which goes from 100% to 0%, where 100% is the original size and 0% is the minimum size.

图片的高度或宽度不能小于350，因此0％应该等于此最小大小.

The image can be no smaller than 350 in either height, or width, so 0% should equate to this minimum size.

我将使用什么公式来计算新尺寸?如果您能解释其逻辑，那将是有帮助的.

What formula would I use to calculate the new dimensions? If you could explain the logic, that would be helpful.

我确定这是我未通过的SAT问题...

I'm certain this is an SAT question that I failed...

推荐答案

var min=Math.min(width,height);
var result=Math.max(min * (percentage/100),350);
var newHeight=(result/min) * height;
var newWidth=(result/min) * width;

0到1之间的百分比(可以更改为0到100的整数，而不是0到1的浮点数).其他词正在描述自己.可能有用:

Percentage between 0 and 1 (can be altered to be 0 - 100 integers instead of 0 to 1 floats). Other words are describing themselves. Maybe useful as a function:

function ff(height,width,percentage){    
    var min=Math.min(width,height);
    var result=Math.max(min*(percentage/100),350);
    var newHeight=(result/min) * height;
    var newWidth=(result/min) * width; 
    return [newWidth,newHeight]; 
 }

不需要数学. CSS已经具备了这些功能.

No math is needed for this. Css is already capable of these things.

min-width: 350px;
min-height:350px;
width: x% (or height: ... x%)
in a 1920 by 1280 sized div.

这篇关于JavaScript图像尺寸调整计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！