Make a DIV and all children elements smaller

css, html, javascript, jquery

Solution

You can use CSS transform:scale

.small {
  transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8, 0.8); /* IE 9 */
  -webkit-transform: scale(0.8, 0.8); /* Safari and Chrome */
  -o-transform: scale(0.8, 0.8); /* Opera */
  -moz-transform: scale(0.8, 0.8); /* Firefox */
}

EDIT: reference/credits: Shrink/Grow animation using jQuery/CSS

Problem

I want to re-size a part of HTML in my design. I need this change to happen as an animation. The DIV itself and all it's inner elements i.e. Images, Paragraphs, Anchors etc should be re-sized just like when you re-size an image with a constant aspect ratio. I think, the tool should get current height and width of element and increase/decrease them, but it won't work for texts, actually for a text element you need to change font size. How can I do this in JS, CSS, HTML?

Original source

Related problems