CSS：在保持宽高比的同时使Canvas尽可能大

Question

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

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

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

Answer 1

如果您愿意使用 JQuery（或常规 JavaScript），那么这样的解决方案可能会奏效：

<script>

    // 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);

</script>

它的作用是找到乘以宽度和高度的比率，以较小者为准（以便它始终适合窗口）。

更新：在 JSFiddle.net 上测试。在这里看到它。

我希望这可以帮助你！