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

Question

概览

我有一个 #container 元素，它包含一个居中元素 .center。

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

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

问题

我正在尝试找出一种扩展 .center 的方法，以便它缩放(所有内容均等缩放，包括图像和字体大小)直到:

• 它的宽度等于#container的宽度，或者
• 它的高度等于#container的高度

我知道 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>

Answer 1

如果您想缩放所有内容，您可以使用 em 或 pt 来设置所有内容的大小，包括图像宽度和填充。然后您可以在字体大小上使用 vw 或 vmin 以根据屏幕大小缩放所有内容。

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

举个例子: https://jsfiddle.net/5ezu2gLu/

此外，您可以根据需要控制最小和最大尺寸。更多信息在这里:http://madebymike.com.au/writing/precise-control-responsive-typography/