html 图片取消纵横比,html – CSS：使Canvas尽可能大,同时保持纵横比

我有一个容器div内的Canvas元素.当用户从他的机器中选择图像时,该图像应显示在画布上.我希望画布尽可能大,但同时保持图像的宽高比.我既不知道图像的比例也不知道容器div的大小,因为这与用户的屏幕/窗口大小有关.

如果我将max-width和max-height设置为例如100％,如果所选图像小于容器,则画布将不会填充容器.如果我设置宽度和高度而不是max-width和max-height,画布不会保持纵横比.

有谁知道如何解决这个问题？

最佳答案 如果您愿意使用

JQuery(或常规

JavaScript),那么这样的解决方案可能有效：

// Note: this uses jQuery.

// It makes getting/setting the dimensions easier,

// but you can do this with normal JavaScript

var img = $("#img");

var container = $("#container");

var width = img.width();

var height = img.height();

var maxWidth = container.width();

var maxHeight = container.height();

var ratio = maxWidth / width;

if(height * ratio > maxHeight) {

ratio = maxHeight / height;

}

img.width(width * ratio);

img.height(height * ratio);

这样做是因为它找到了宽度和高度相乘的比率,无论哪个更小(这样它总是适合窗口).

更新：在JSFiddle.net上测试.见它here.

我希望这可以帮助你！