具有高宽比的中心格

Question

我需要在html视口中将Div居中。它应在垂直和水平方向上居中。但是Div应该保持其长宽比（4/3），并且最小边距为10px。

我制作了Java脚本：

function resizeWindow() {
 var wHeight = $(document).height() - 20;
 var wWidth = $(document).width() - 20;
 var gameStage = $("#gameStage");
 if ((wWidth / 4) * 3 <= wHeight) {
  gameStage.css("width", wWidth + "px");
  gameStage.css("height", ((wWidth / 4) * 3) + "px");
  gameStage.css("top", (wHeight - ((wWidth / 4) * 3)) / 2 + 9 + "px");
  gameStage.css("left", "10px");
 } else {
  gameStage.css("height", wHeight + "px");
  gameStage.css("width", ((wHeight / 3) * 4) + "px");
  gameStage.css("left", (wWidth - ((wHeight / 3) * 4)) / 2 + 9 + "px");
  gameStage.css("top", "10px");
 }
}

https://jsfiddle.net/3sw06kvb/

但是禁用Javascript的用户将无法使用我的网站。使用HTML / CSS的解决方案应该更快（？）。

我的第一个主意是用]做包装纸>

position: fixed 
top, left, bottom, right = 20px;.
但是我的问题是使div垂直和水平居中，同时保持其长宽比。

https://jsfiddle.net/xep2mf62/

我需要在html视口中将Div居中。它应在垂直和水平方向上居中。但是Div应该保持其长宽比（4/3），并且最小边距为10px。我做了一个...

Answer 1

您可以在CSS中尝试以下方法。CSS3 vh和vw中的新单位允许您根据视口的大小来设置高度。 height:100vh将使元素的高度等于浏览器窗口的高度。

Answer 2

仍然是JS，但更简单