调整图像大小以使其适合特定大小的画布并保持纵横比

Question

I have some boxes that have the dimensions of 340 x 170 and users will be uploading images that need to be displayed into these boxes; however I'm not really sure how to go about resizing them so they don't lose aspect ratio and always fit in the box.

Requirements..

• Canvas should always be 340 x 170
• Image can't lose aspect ratio
• If the image has a greater width than height than it should be as wide as possible to 340px
• Ditto to the height
• Should always be able to see the whole image in the canvas

Normally you would just resize by the largest side, however this obviously won't work as then you will end up with a larger height than 170px if the height is close to the width.

Answer 1

What you really care about is the relationship between the image's aspect ratio and the canvas' aspect ratio.

Here's some self-explanatory code (would be glad to add explanation if needed):

var imgRatio = img.width / img.height; // Image aspect ratio
var canvasRatio = canvas.width / canvas.height; // Canvas aspect ratio

var resultImageH, resultImageW; // Variables that hold the result of the sizing algorithm

if(imgRatio < canvasRatio) {
    resultImageH = canvas.height;
    resultImageW = resultImageH * imgRatio;
}
else {
    resultImageW = canvas.width;
    resultImageH = resultImageW / imgRatio;
}