Scale/zoom A Dom Element And The Space It Occupies Using Css3 Transform Scale()

Question

In the middle of my page I have a div element with some content in it (other divs, images, whatever).

before

<

Solution 1:

The HTML (Thanks Rory)

<!DOCTYPE html><html><head><metaname="description"content="Sandbox for Stack Overflow question http://stackoverflow.com/q/10627306/578288" /><metacharset=utf-8 /><title>Sandbox for SO question about scaling an element both visually and dimensionally</title></head><body><divid="wrapper"><divclass="surrounding-content">
      before
    </div><divid="content-to-scale"><div>something inside</div><div><imgsrc="http://placekitten.com/g/150/100"></div><div>another something</div></div><divclass="surrounding-content">
      after
    </div></div></body></html>

The CSS (Still started from Rory's base)

body {
  font-size: 13px;
  background-color: #fff;
}
#wrapper {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 0.07692307692307693em solid #888;
  padding: 1.1538461538461537em;
}
.surrounding-content {
  border: 0.07692307692307693em solid #eee;
}
#content-to-scale {
  border: 0.07692307692307693em solid #bbb;
  width: 10em;
}
#content-to-scale {
  font-size: 1.1em;
}
#content-to-scaleimg {
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
}

The Explanation:

I'm using font size and ems to "scale" the dimensions of the child elements.

Ems are dimension units that are relative to the current context's font-size.

So if I say I have a font-size of 13px and a border of 1 (the desired border-width in pixels) divded by 13 (the current context's font-size also in pixels) = 0.07692307692307693em the browser ought to render a 1px border

To emulate a 15px padding I use the same formula, (desired pixels)/(current context's font-size in pixels) = desired ems. 15 / 13 = 1.1538461538461537em

Baca Juga

To tame the scaling of the image I use an old favorite of mine: the natural ratio preserving scale, let me explain:

Images have a natural height and width and a ratio between them. Most browser's will preserve this ratio if both width and height are set to auto. You can then control the desired width with min-width and max-width, in this case making it always scale to the full width of the parent element, even when it will scale beyond it's natural width.

(You can also use max-width and max-height 100% to prevent the image from busting out of the borders of the parent element, but never scaling beyond their natural dimensions)

You can now control the scaling by tweaking the font-size on #content-to-scale. 1.1em roughly equals scale(1.1)

This does have some drawbacks: nested font-sizing in ems are applied recusively. Meaning if you have:

<styletype="text/css">div{
        font-size: 16px;
    }
    span{
        font-size: 0.5em;
    }
</style><div><span><span>
            Text
        </span></span></div>

You will end up with "Text" rendering at 4px instead of the 8px you might expect.

Html5 Guru

Scale/zoom A Dom Element And The Space It Occupies Using Css3 Transform Scale()

Solution 1:

You can now control the scaling by tweaking the font-size on #content-to-scale. 1.1em roughly equals scale(1.1)

Post a Comment for "Scale/zoom A Dom Element And The Space It Occupies Using Css3 Transform Scale()"