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>

收缩div中的所有内容

1 个答案: