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

Question

Overview

I have a #container element which houses a centered element .center .

This web-app will be fullscreen on a number of monitors of various width and height; some portrait and some landscape.

The .center element is significantly smaller than its parent #container , and on larger screens, it sits in the middle with lots of space between the wrapper and the edges, both horizontally and vertically.

Issue

I am trying to figure out a way to expand the .center so that it scales (all its contents scaling equally, including images and font size) until either:

• its width is equal to the width of #container , or
• its height is equal to the height of #container

I am aware of the CSS3 transform: scale() functions, however as the height and width of the #container is unknown and variable, I don't know how to scale all elements dynamically.

How can this be achieved?

Code

 #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

If you want to scale everything you can use em or pt to set sizes for everything including image widths and padding. Then you can use vw or vmin on the font size to scale everything according to screen size.

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

Here is an example: https://jsfiddle.net/5ezu2gLu/

Also, you can control the minimum and maximum sizes, on whatever you wish. More info here: http://madebymike.com.au/writing/precise-control-responsive-typography/

Answer 2

Try these changes:

Remove the center DIV from your HTML.

And change the following CSS:

#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%;
}

Here's an updated EXAMPLE

This basically scales the elements as the viewport width is reduced, however, I would advise using @media() queries to be more precise when scaling fonts etc.