Shrink everything in a div

Question

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.

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

Answer 1

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

Assume you have the following HTML

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

and CSS

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

script for calling a function

$('#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>