CSS：使Canvas尽可能大，同时保持纵横比-Java 学习之路

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

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

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

2 回答

如果您愿意使用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 .

我希望这可以帮助你！

回复于 2024-04-28T19:12:14+08:00

-1
阅读完有关视频的说明后，请查看以下内容：

https://jsfiddle.net/d0dox9xt/
```
body {
    background: #eee;
}

#container {
    margin:0 2% 0 2%;
}

#v {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}
```
唯一的技巧是设置宽度：100％;这将保持纵横比 .

注意在JS中
```
document.addEventListener('DOMContentLoaded', function(){
    var v = document.getElementById('v');
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');
}

function draw(v) {
    c.drawImage(v, 0, 0);
}
```
drawImage函数可以使用许多参数 . 第一个参数是插入媒体，接下来的两个是用于定位 . 您可以使用许多参数来定位和更改高度和宽度 . 我让他们独自一人，所以它将遵循CSS规则 .

以下是有关放置在画布上的更多信息的链接：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
回复于 2024-04-28T19:12:14+08:00

CSS：使Canvas尽可能大，同时保持纵横比

2 回答

相关问题