【问题标题】：Resize div width relative to its height to keep aspect ratio相对于其高度调整 div 宽度以保持纵横比
【发布时间】：2014-04-17 06:25:17
【问题描述】：

我想将.center div 的宽度相对于其高度保持4:3 纵横比（4 个宽度/3 个高度）和100% 的高度；然后将 div 水平居中对齐。

就像您可以通过 Flash 应用程序看到 here 一样。

这就是我所拥有的：

HTML：

<div id="stuff" class="center" width="800" height="600"> 
     <canvas id="someHTML5">You cant play HTML5</canvas>
</div>

CSS：

.center {
    position: absolute;
    left: 50%;
    width: 800px; /* how do I make this relative; i want: pseudo code: width: height/3*4; */
    height: 100%;
    margin-left: -400px; /* -width/2 for horizontal alignment */
    z-index: 100;  
}

我还有一个 JavaScript 循环来集成 JavaScript 端更新。

【问题讨论】：

How to center a div in a div - horizontally?的可能重复

标签： css html height width

【解决方案1】：

我制作了一个像视频一样调整大小的脚本。

window.onresize = function() {
  resize();
};

function resize() {
  var wrapper = document.querySelector(".wrapper");
  var wrapperwidth = 1920;
  var wrapperheight = 1080;
  var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  var ratio = Math.min(vw / wrapperwidth, vh / wrapperheight);
  wrapper.style.transform = `translate(-50%, -50%) scale(${ratio})`;
}

resize();

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1919px;
  height: 1079px;
  overflow: hidden;
  background-color: red;
}

/* demo text (smiley face) */

.wrapper::after {
  content: ":)";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  font-family: "Roboto", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

&lt;div class="wrapper"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

由于该框的width 应相对于其height 进行更改，因此您可以使用vh viewport relative length 作为width 属性的值。

来自Spec：

视口百分比长度与初始包含块。当height 或width 的初始包含块被更改，它们会相应地缩放。

vh 单位
等于初始包含块的height 的1%。

给你：

.center {
    position: absolute;
    left: 50%;
    width: 133.33vh; /* 100 * 4/3 ratio */
    height: 100%;
    margin-left: -66.66vh; /* width / 2 */
    z-index: 100;
}

WORKING DEMO.

值得注意的是vh、vw viewport-percentage lengths are supported in IE9+。

浏览器兼容性

_{致谢：Mozilla Developer Network}

【讨论】：