CSS：保持画布比例的情况下尽可能使画布变大

Question

我有一个Canvas元素，它位于一个容器div中。当用户从他的机器上选择一张图片时，应该在canvas上显示此图片。我希望canvas尽可能大，但同时保持图像的纵横比。我不知道图像的比例和容器div的大小，因为这是相对于用户的屏幕/窗口大小的。如果我将max-width和max-height设置为例如100％，则如果所选图像小于容器，则canvas将无法填充容器。如果我设置width和height而不是max-width和max-height，则canvas不会保持纵横比。是否有人有解决方法？

- DP.

---

“尽可能大”是指宽度或高度与容器div的尺寸相同，而另一个尺寸不超过容器div的尺寸（我猜测是根据窗口大小）？ - Jonathan Lam

也许你想使用JavaScript？ - Jonathan Lam

没错。那么我用 JavaScript 怎么做呢？ - DP.

我会回答的，请稍等一下。 - Jonathan Lam

我完成了。它可以工作。请查看JSFiddle的链接。如果有帮助，请记得接受！ - Jonathan Lam

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>

这段代码会计算宽度和高度中较小的那个值所对应的比例，然后将两者都乘以该比例，以确保图片始终适合窗口大小。 < p >更新: 在JSFiddle.net上测试过。 点击此处查看。

希望这能帮到你！

- Jonathan Lam

---

是的，那似乎是一个聪明的方法。谢谢！那么，如果窗口大小改变，我只需要添加一个事件监听器。或者一开始就有使用相对值（例如百分比）的方法吗？ - DP.

就像你所说的，百分比可能会影响纵横比或填充整个空间。我认为添加一个调整大小的监听器会更容易（在jQuery中只需添加一行代码）。很高兴能帮到你！ - Jonathan Lam

我忍不住要给你的答案加上一些建议。当你只需要两次时，调用JQuery选择器来爬取DOM 6次并不是最好的选择。我还认为，由于我们正在教授经验不足的编码人员使用没有 {} 的条件块，这展示了糟糕的风格。你的答案是正确的，只是有点懒散。 - Blindman67

我还要补充一点，OP 请求更改画布元素的大小，这不应该通过 CSS 进行操作（jQuery 的 width() 是 CSS 值）。 - Kaiido

Answer 2

在阅读了您关于视频的澄清之后，请查看以下内容：

https://jsfiddle.net/d0dox9xt/

body {
    background: #eee;
}

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

#v {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

唯一的技巧是设置width: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/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

- Brian Scramlin

---

关于视频的哪些澄清？ - Jonathan Lam

@jlam55555 我给我的原帖写了一个评论。没关系，我可以适应。 @brian-scramlin 谢谢你的回答，但是我觉得这不是我真正想要的。我想显示的是画布，而不是视频。此外，如果视频非常高且我设置宽度为100%，它会在垂直方向上溢出。还是谢谢你的回答。 - DP.