Question

概述

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

这个网络应用程序将在各种宽度和高度的监视器上全屏显示;一些肖像和一些风景。

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

问题

我正试图找出一种扩展.center的方法，以便它可以扩展（所有内容的扩展均等，包括图像和字体大小），直到：

其宽度等于#container或
其高度等于#container

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

如何实现这一目标？

代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

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/

Answer 2

尝试以下更改：

从HTML中删除center DIV。

并更改以下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%;
}

这是更新后的EXAMPLE

这基本上会在视口宽度减小时缩放元素，但是，我建议在缩放字体等时使用@media()查询更精确。

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

概述

问题

代码

2 个答案: