如何缩放画布并保持其在屏幕上的位置？

Question

我需要缩放画布（宽度为1920px，高度为1080px）以适合屏幕宽度并保持其在屏幕上的位置，如下所示：

我尝试将CS​​S规则transform: scale(0.6666)应用于canvas DOM，但我得到了：

我如何解决这个问题并得到我想要的东西？

Answer 1

好的，如果你想使用javascript：

您需要知道要使用的比例。

var originalWidth = document.getElementById('container').offsetWidth;
var originalHeight = document.getElementById('container').offsetHeight;

var scale1 = 1080/1920; //if width is always bigger than height
var scale2 = originalWidth/originalHeight; 

//var scale1 = 1080/1920; //if height is always bigger than width
//var scale2 = originalWidth/originalHeight; 

window.onresize = function(event) {
    var getWidth = document.getElementById('container').offsetWidth;

    document.getElementById(('container').setAttribute("style","height" + getWidth*scale1);
};

在CSS中将宽度设置为100％，以便自动缩放，并使用javascript设置高度。

Scale1是您预设的一个，以保持一致，scale2也是如此，但如果您在屏幕打开时调整大小，我只会使用scale2。例如，在桌面上，当您在首次启动时设置比例时调整窗口大小。

这是一个显示它正常工作的小提琴：http://jsfiddle.net/d4kVk/239/

编辑：

最近我用两个简单的行来讨论如何在css中执行此操作：

width: 100vmax;
height:56.25vmax;

＆＃39; VMAX＆＃39;获得宽度和高度的最高值。因此，将vmax值设为56.25（如1080/1920，即纵横比）可以解决您的问题：）

更新了小提琴：http://jsfiddle.net/d4kVk/246/