Question

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

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

无论是高度还是宽度，图像都不能小于350，因此0％应该等于这个最小尺寸。

我会用什么公式来计算新尺寸？如果你能解释逻辑，那将会有所帮助。

我确定这是一个我失败的SAT问题......

Answer 1

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个浮点数）。其他的话正在描述自己。也许有用的功能：

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已经具备了这些能力。

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

Answer 2

以下方法将使用百分比重新调整图像大小，0%为最小值，并保持图像保持宽高比：

最好的方法是创建function，其中包含值x，y，percentage和minimum。接下来，创建一个名为ratio的变量y / x（如下所述）。然后乘以x（减去minimum，以缩小范围，从而使0%等于350并(percentage/100)和y（减去{ {1}}次minimum，为ratio创建不同的范围，从而保持宽高比y，并返回(percentage/100)重新设置array {1}}和x，每个加y（以及minimum加y次minimum来补偿我们所做的事情，所以ratio是0%和350，而233.333是100%和1920。如果高度大于宽度，则1280 / y个x / x的比例为y，minimum将乘以{{ 1}}代表ratio，而不是x。看看这段代码：

- 并按照以下方式运行：

resizeImage = function(x,y,percentage,minimum) {
    if (x > y) {
        ratio = y/x;
        rx = (x-minimum)*(percentage/100);
        ry = (y-minimum*ratio)*(percentage/100);
        return [rx+minimum,ry+minimum*ratio];
    } else {
        ratio = x/y;
        rx = (x-minimum*ratio)*(percentage/100);
        ry = (y-minimum)*(percentage/100);
        return [rx+minimum*ratio,ry+minimum];
    }
}

使用resizeImage(1920,1280,0,350); // returns [350, 233.333] resizeImage(1920,1280,30,350); // returns [821, 547.333]，HTML和JavaScript查看此工作示例（拖动图片上方的滑块以重新调整大小）：

jQuery

$(document).ready(function() {

    var w = 518;
    var h = 387;
    var min = 350;

    resizeImage = function(x,y,percentage,minimum) {
        if (x > y) {
            ratio = y/x;
            rx = (x-minimum)*(percentage/100);
            ry = (y-minimum*ratio)*(percentage/100);
            return [rx+minimum,ry+minimum*ratio];
        } else {
            ratio = x/y;
            rx = (x-minimum*ratio)*(percentage/100);
            ry = (y-minimum)*(percentage/100);
            return [rx+minimum*ratio,ry+minimum];
        }
    }

    $("#slider").change(function() {
        p = $("#slider").val();
        $("img").css({width:resizeImage(w,h,p,min)[0],height:resizeImage(w,h,p,min)[1]});
    })
  
})

希望这有帮助！：）

Answer 3

确定。要计算图像大小调整，您可以使用以下计算：最大宽度：1920 最大高度：1280

宽度最小：？身高最低：350

1280 - 350 = 930 930/100 = 9.3 1％等于9.3px

1920 - 1280 = 640 350 + 640 = 990

新的最小宽度= 990

1920 - 990 = 930 930/100 = 9.3

1％等于9.3

然后你必须为每1％使用9.3像素值

如果您认为350个像素是两个维度的最小值，那么您的图像看起来很奇怪

Answer 4

经过一些调整并查看提供的答案后，这里有一些工作代码可以调整高度，宽度和宽高比的差异。使用一些data属性，这是一个良好的开端，如果您使用不同形式的数据通信，只需根据需要替换变量。首先是HTML：

<input type="range" min="0" max="100" value="100" step="1" id="slider" style="width: 500px;" />
<div id="per">100%</div>
<div>
    <img src="http://placehold.it/1920x1280" alt="My image" id="my-img" />
</div>

很简单，在测试时，更改src标记的img属性，以查看代码如何处理不同的大小。现在有趣的部分：

var id = function(i){return(document.getElementById(i));},
    slider = id('slider'),
    per = id('per'),
    img = id('my-img'),
    d_w = 0,
    d_h = 0,
    min = 350,
    reSize = function(percent) {
        var h = slider.getAttribute('data-h') == 'true',
            s_h = (parseFloat(slider.getAttribute('data-step-h')) * percent) + min,
            s_w = (parseFloat(slider.getAttribute('data-step-w')) * percent) + min,
            o_h = (d_h / d_w) * s_w,
            o_w = (d_w / d_h) * s_h;
        img.style.height = ((h) ? s_h : o_h).toString() + 'px';
        img.style.width = ((h) ? o_w : s_w).toString() + 'px';
    };
img.addEventListener('load', function() {
    d_w = this.width;
    d_h = this.height;
    slider.setAttribute('data-h', (d_w > d_h));
    slider.setAttribute('data-step-h', (d_h - min) / 100);
    slider.setAttribute('data-step-w', (d_w - min) / 100);
    slider.addEventListener('input', function() {
        var perc = parseFloat(this.value);
        per.innerHTML = perc.toString() + '%';
        reSize(perc);
    }, false);
}, false);

很少有快速指针，请确保将其包含在onload或更好的DomContentLoaded方法中，例如：

document.addEventListener('DOMContentLoaded', function()( /* Code */ }, false);

请注意，在较旧的IE中，range类型的input不受支持，有些可能只有hidden个输入？另外，input事件中的slider不是{1}}，而是IE 10中的change，所以请记住跨浏览器。

代码细分，是吗？好吧，首先我们声明一些变量，其中id只是为了抓住ID，抓住元素，有更多的全局＆＃39;类似变量（d_w，d_h和min）其中d_w是default width而d_h是，是的，default height。 reSize()函数抓取分配给图像的数据并将其用于计算并确定哪一边较长，然后s_h和s_w使用该步骤调整像素，某些方面比率方程式，最后使用CSS命中元素的width和height。

slider.addEventListener执行一些简单的操作，例如更新百分比并在移动时运行reSize()函数。同样，请确保检查IE 10并将input替换为change，如果您希望这样做...＆＃39;浏览器＆＃39;。

最后，img事件获取默认width和height，将它们分配给所述变量（d_w和d_h），检查哪一方是更长，并在Paulo的帮助下，根据实际尺寸与最小尺寸的偏差计算每个百分比的步长。我在Chrome，FF和IE 10+上进行了测试，它运行良好。它将在IE 9＆gt;上运行，但您必须使用attachEvent和range元素。希望这会有所帮助。

修改
我将slider事件放在img加载事件中，以防止过早触发代码。我可以更多地调整它，甚至使它成为一个独立的课程＆＃39; （好吧，有点儿，JS课程很奇怪），如果你愿意的话，请告诉我，我就可以了解它。

Javascript图像调整大小计算

4 个答案: