收缩div中的所有内容

Question

我正在做一个小项目,我需要缩小整个div,并且它的子项与它们的大项目相同.我目前正在使用CSS3功能,但它们无法正常工作.

总而言之,我只需要能够以与以前相同的比例缩小整个div.

Answer 1

您可以使用css3 transfrom的scale属性来扩展现代浏览器中的元素.

假设您有以下HTML

<div id='shrinkMe'>
 <div id='shrink1' class='content'></div>
 <div id='shrink2' class='content'></div>
</div>

和CSS

.shrink{
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-ms-transform:scale(0.5);
transform:scale(0.5);
}

用于调用函数的脚本

$('#shrinkMe').click(function(){ // or any other event
 $(this).addClass('shrink');
});

$('#shrinkMe').click(function() { // or any other event
  $(this).addClass('shrink');
});

#shrinkMe {
  position: relative;
  height: 200px;
  width: 200px;
  text-align: center;
  background: cyan;
}
.content {
  position: absolute;
  height: 50px;
  width: 50px;
}
#shrink1 {
  top: 0;
  left: 0;
  background: blue;
}
#shrink2 {
  right: 0;
  bottom: 0;
  background: yellow;
}
.shrink {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='shrinkMe'>
  <div id='shrink1' class='content'></div>
  <div id='shrink2' class='content'></div>
</div>