缩小div中的所有内容 [英] Shrink everything in a div

问题描述

我正在做一个小项目，需要缩小整个div，孩子的比例与大孩子相同.我目前正在使用CSS3函数，但它们无法正常工作.

I'm working on a small project where I need to shrink a whole div, and it's children to the same ratio as when their big. I'm currently using the CSS3 functions and they are not working correctly.

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

So to sum, I just need to be able to shrink a whole div with the same ratio as before.

推荐答案

您可以使用 css3

You can make use of css3 transfrom's scale property which scales the element in modern browsers.

假设您具有以下HTML

Assume you have the following 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中的所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！