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

2023年4月21日 279次阅读

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

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

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

最佳答案 如果您愿意使用
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上测试.见它here.

我希望这可以帮助你！

点赞