如何使用CSS3/JavaScript缩放DIV元素及其子元素以适应父元素
How to scale a DIV element and its children to fit in parent element with CSS3/JavaScript
概述
我有一个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>
如果您想缩放所有内容,可以使用em或pt设置所有内容的大小,包括图像宽度和填充。然后,您可以在字体大小上使用vw或vmin来根据屏幕大小缩放所有内容。
padding:1em;
width:30em;
font-size:2vw;
以下是一个示例:https://jsfiddle.net/5ezu2gLu/
此外,您可以根据自己的意愿控制最小和最大尺寸。更多信息请点击此处:http://madebymike.com.au/writing/precise-control-responsive-typography/
尝试以下更改:
从HTML中删除#container
0 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%;
}
这是一个更新的示例
这基本上是随着视口宽度的减小而缩放元素,但是,我建议在缩放字体等时使用@media()
查询以更精确。
相关文章:
- CSS3:当页面向下滚动到第一个视口时,是否可以在元素上触发转换
- 'toggel'使用css3/jquery来回旋转元素
- 如何使用CSS3/JavaScript缩放DIV元素及其子元素以适应父元素
- 我将如何使用CSS3对动态创建的jQuery UI元素进行样式设置
- 浮动元素上的 CSS3 过渡
- 堆叠对 JavaScript 中元素的更改,以实现完美渲染的 CSS3 过渡
- 使用CSS3隐藏元素
- 如何使用属性显示带有CSS3转换的隐藏元素
- 检查元素是否正在为CSS3设置动画
- 确定任意元素是否正在使用CSS3动画
- 获取经过CSS3转换的元素的大小
- CSS3-分步骤在屏幕上转换一个元素
- CSS3转换不会;删除新建元素的类时不起作用
- CSS3在子元素中添加/移除类时的过渡动画
- 使用CSS3缩放后,获得元素的实际宽度和高度
- 为什么我的100%宽元素变成30000px+宽时使用css3- mediaqueres .js
- 我可以暂时关闭所有的CSS3过渡/动画,而一个元素是建立
- CSS3同一元素的多重过渡
- 如何防止CSS3转换从使元素不可点击
- 如果元素初始值为display: none,则CSS3动画不会在Opera中启动