概览
我有一个 #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>
最佳答案
如果您想缩放所有内容,您可以使用 em 或 pt 来设置所有内容的大小,包括图像宽度和填充。然后您可以在字体大小上使用 vw 或 vmin 以根据屏幕大小缩放所有内容。
padding:1em;
width:30em;
font-size:2vw;
举个例子: https://jsfiddle.net/5ezu2gLu/
此外,您可以根据需要控制最小和最大尺寸。更多信息在这里:http://madebymike.com.au/writing/precise-control-responsive-typography/
关于javascript - 如何使用 CSS3/JavaScript 缩放 DIV 元素及其子元素以适应父元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36458807/