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

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

如果我将“最大宽度”和“最大高度”设置为例如100%，则如果所选图像小于容器，则画布将不会填充容器。如果我设置了宽度和高度而不是最大宽度和最大高度，画布将不会保持纵横比

---

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

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

//注意：这使用jQuery。
//它使获取/设置尺寸变得更容易，
//但是你可以用普通的JavaScript来实现这一点
var img=$（“#img”）；
var container=$（“#container”）；
变量宽度=img.width（）；
变量高度=img.height（）；
var maxWidth=container.width（）；
var maxHeight=container.height（）；
var比率=最大宽度/宽度；
如果（高度*比率>最大高度）{
比率=最大高度/高度；
}
img.宽度（宽度*比率）；
img.高度（高度*比率）；

它的作用是找到宽度和高度的乘积，以较小者为准（这样它将始终适合窗口）

更新：在JSFiddle.net上测试。看到了

---

我希望这对你有帮助

阅读您关于视频的说明后，请查看以下内容：

唯一的技巧是设置宽度：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规则

---

这里有一个关于在画布中放置的更多内容的链接：

所说的“尽可能大”是指宽度或高度与容器div相同，而另一个不超过容器div的尺寸（我根据窗口的大小猜测）？也许你想使用JavaScript？是的，完全正确。那么我该如何使用JS呢？我会发布一个答案。。。还有，你想显示任何代码/尝试吗？是的，这似乎是一个聪明的方法。非常感谢。因此，如果调整了窗口的大小，我只需要添加一个事件侦听器。或者有没有一种方法可以首先使用相对值（例如%）？就像你说的，百分比可能会弄乱纵横比或填充整个空间。我认为调整侦听器的大小会更容易（在jQuery中添加一行）。很高兴它有帮助！我不得不对你的答案提出一些建议。调用JQuery选择器对DOM进行6次爬网不是最好的，因为您只需要它两次。我还认为，当我们在教没有经验的程序员时，没有

{}

的条件块的使用展示了糟糕的风格。你的回答是正确的，只是有点草率。我还要补充一点，OP要求更改画布元素的大小，这不应该通过CSS来完成（jQuery的

width（）

是CSS值）。关于视频有什么澄清吗？@jlam55555我在我的原始帖子中写了一条评论。没关系，我能适应它。@brian scramlin谢谢你的回答，但我想这不是我真正的意思。我想展示的是画布，而不是视频。此外，如果视频非常高，我将宽度设置为100%，它将垂直溢出。还是谢谢你的回答。

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