Question

我想用图片（但不是拉伸）填充div，就像在这篇文章CSS Image size, how to fill, not stretch?中一样，但我不需要使用CSS，而是需要使用JavaScript计算值。

这就是我所拥有的：

image.onload = ()=> {
      var ratio: number = image.width / image.height;

      if (ratio > 1) {
        image.height = this._height;
        image.width = ratio * this._height;
        image.style.left = -((image.width - this._width) / 2) + "px";
      } else {
        ratio = 1 / ratio;
        image.width = this._width;
        image.height = ratio * this._width;
        image.style.top = -((image.height - this._height) / 2) + "px";
      }
    };

this是div，image是普通的Image（）。

它适用于大多数情况，但不适用于例如this._width < ratio*this._height。

如何让算法适用于所有情况？我知道这很简单，但我无法让它发挥作用。

Answer 1

我认为问题在于您将ratio与1进行比较，但您应该将其与div的比率进行比较：

image.onload = ()=> {
      var imgRatio: number = image.width / image.height,
          divRatio: number = this._width / this._height;

      if (imgRatio > divRatio) {
        image.height = this._height;
        image.width = this._height * imgRatio;
        image.style.left = -((image.width - this._width) / 2) + "px";
      } else {
        image.width = this._width;
        image.height = this._width / imgRatio;
        image.style.top = -((image.height - this._height) / 2) + "px";
      }
};

Answer 2

我不确定这是否会有所帮助，但这是我过去用于设置canvas元素图像大小的函数。

图像将占据整个元素而不会使其偏斜。

function setCanvasImage(canvas, source) {

    var canvasWidth  = canvas.width;
    var canvasHeight = canvas.height;

    var context = canvas.getContext('2d');

    var image = new Image();

    image.src = source;

    image.onload = function () {

        var sourceWidth = canvasWidth / canvasHeight * image.height;
        var sourceX = (image.width - sourceWidth) / 2;

        if(sourceX > 0) {

            var sourceY = 0;
            var sourceHeight = image.height;

        } else {

            var sourceX = 0;
            var sourceWidth = image.width;

            var sourceHeight = canvasHeight / canvasWidth * image.width;
            var sourceY = (image.height - sourceHeight) / 2;
        }

        //placing
        var destinationX = 0;
        var destinationY = 0;
        var destinationWidth = canvas.width; 
        var destinationHeight = canvas.height; 

        context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight);
    }
}

Answer 3

您需要计算2个比例值，使图像与容器一样宽的比例值，以及使图像与容器一样高的比例值。要缩放图像以适合此容器，您可以选择较小的这些比例，并将图像缩放到容器之外，您可以选择最大的比例。您不关心图像的宽度和高度之间的比例。将图像拟合到容器内并居中的示例：

var xScale = _width/img.width;     // Scale by this much to fit x
var yScale = _height/img.height;   // Scale by this much to fit y

var width = _width;
var height = _height;
var top = 0;
var left = 0;

if (xScale !== yScale) {
    // Choose the smaller scale. To make the image extend, make this >
    if (xScale < yScale) {
        height = Math.round(xScale * height);
        top = Math.round((_height - height) / 2);
    } else {
        width = Math.round(yScale * width);
        left = Math.round((_width - width) / 2);
    }
}

img.width = width;
img.height = height;
img.top = top + "px";
img.left = left + "px";

使用JavaScript填充图像（不拉伸）

3 个答案: