Question

好吧，我对此完全无能为力。我花了两天时间试图创建这个看似简单的任务

我想创建一个类似计算器的小部件（不是真的，但非常接近计算器）我想要一个黑色的div，保持可见屏幕的3/8宽度/高度比。 div应该居中。如果用户更改屏幕（通过拖放\全屏幕），小部件应相应地自行调整。

我似乎无法使这个div工作！

我的意图是在我有这样一个div之后插入很多嵌套的div（比如按钮）并且他们将相应地保持他们的规模。

这项任务如此复杂吗？

这个任务如此复杂我应该使用它的框架吗？（我的意思是这是一个像小部件一样的简单计算器，为什么我需要一个框架用于＆gt;？）

编辑2 谢谢你们，但我犯了一个错误..我真正的意思是小部件将保持固定的大小（宽度\高度）为3/8

Answer 1

#centered { 
   position: fixed; 
   top: 10%; 
   bottom: 10%; 
   width: 30%; 
   left:0; 
   right:0; 
   margin: 0 auto; 
   background: #000; 
}

Answer 2

好的，我的第一个答案失败了，因为你的问题措辞不正确。

无论如何，这是真正的答案：

要使用CSS维持给定的宽高比，诀窍是创建一个0高度的容器，然后使用padding-top。

例如，16：9容器将是

{ height:0; padding-top: 56.25%; /* 9/16 = 56.25 */ }

所以，你可以正确地猜测，8：3的比例是37.5％（3/8）。

知道了这些信息以及其他一些CSS魔法，我把下面的小提琴拼凑在了一起。它保持在屏幕的中心并保持纵横比。

请记住，保持宽高比的危险在于内容现在可以轻易地溢出元素。

Answer 3

我为你准备了this一个jsFiddle。它可在x和y轴上缩放。

  #content{
    position:absolute;
    top:10%;
    bottom:10%;
    right:35%;
    left:35%;
    background:black;
  }

Answer 4

你可以用我写的脚本来做到这一点：

你可以说

responsivem(300,800)

然后将主要div设置为

style="width:300em; height:800em"

所以一个宽度为应用宽度的1/3的按钮将是宽度：100em。看演示并尝试一下!!