html - 屏幕中间的简单响应式 div，宽高比为 3\8

Question

好吧，我对此一无所知。我现在花了 2 天时间来尝试创建这个看似简单的任务

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

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

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

这个任务有这么复杂吗？

这个任务这么复杂我应该使用一个框架吗？（我的意思是这是一个简单的计算器，比如小部件，为什么我需要一个框架>？）

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

score 1 · Accepted Answer

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

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

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

例如，一个 16:9 的容器将是

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

因此，您可以正确猜测 8:3 的比例为 37.5% (3/8)。

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

请记住，保持纵横比的危险在于内容现在很容易溢出元素。

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

你可以说

responsivem(300,800)

然后将您的主 div 设置为

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

因此，一个为应用程序宽度 1/3 的按钮将是宽度：100em。查看演示并尝试一下！

score 0 · Accepted Answer

我为您尝试了一个 jsFiddle。它在 x 和 y 轴上可缩放。

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

4 回答 4