如何使用CSS3/JavaScript缩放DIV元素及其子元素以适应父元素

概述

我有一个CCD_ 1元素，它容纳了一个居中的元素CCD_。

这个网络应用程序将在多个不同宽度和高度的显示器上全屏显示；一些肖像和一些风景。

.center元素明显小于其父#container，在较大的屏幕上，它位于中间，在包装器和边缘之间有很大的空间，无论是水平还是垂直。

问题

我正试图找到一种方法来扩展.center，使其能够缩放（所有内容都可以平等缩放，包括图像和字体大小），直到：

• 其宽度等于#container的宽度，或者
• 其高度等于CCD_ 7的高度

我知道CSS3 transform: scale()函数，但由于#container的高度和宽度是未知的且可变的，我不知道如何动态缩放所有元素。

如何做到这一点？

代码

#container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: rgb(37, 66, 141);
    background: -moz-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
    background: radial-gradient(ellipse at center, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25428d', endColorstr='#000000', GradientType=1);
}    		
#wrapper {
    padding: 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    height: 100%;
    width: 100%;
    text-align: center;
    z-index: 2;
}
#wrapper .center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}
		
* {
    color: white;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.62em;
}
#logo {
    margin: 40px 0;
}
#pulsor {
    -webkit-animation: pulsate 60s linear 0s infinite;
    -moz-animation: pulsate 60s linear 0s infinite;
    -animation: pulsate 60s linear 0s infinite;
    text-shadow: 0 0 8px #ccc;
}
@-webkit-keyframes pulsate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes pulsate {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@keyframes pulsate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
body,
html {
    margin: 0;
    padding: 0;
}

<div id="container">
  <div id="overlay"></div>
  <div id="wrapper">
    <div class="center">
      <h1>Tonight at</h1>
      <div id="logo"><img src="http://design.ubuntu.com/wp-content/uploads/logo-ubuntu_cof-orange-hex.png" id="pulsor" width="280"></div>
      <h2>Theatre</h2>
      <p>19:30 - Les Miserables</p>
      <p>20:30 - A cheeky Indian take-away</p>
      <p></p>
      <h2>Devant Room</h2>
      <p>17:30 - My Favourite Books with JK Rowling</p>
      <p>18:00 - Look! I did a sleight of hand! Just kidding with Lennart Green</p>
      <p>19:30 - Old people grumbling about the number of steps to the Theatre</p>
    </div>
  </div>
</div>

padding:1em;
width:30em;
font-size:2vw;

#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: rgb(37, 66, 141);
  background: -moz-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
  background: -webkit-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
  background: radial-gradient(ellipse at center, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25428d', endColorstr='#000000', GradientType=1);
}           
#wrapper {
  padding: 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: relative;
  height: 100%;
  width: 100%;
  text-align: center;
}
#logo img {
   max-width: 100%;
}