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

<div>
    before
</div>
<div id="content-to-scale">
    <div>something inside</div>
    <div>another something</div>
</div>
<div>
    after
</div>

I would like to scale that element (content-to-scale) and all it's children. Seems like a job for CSS3 transform's scale operation. However, the problem is that this is a transform on the visualization of that element hierarchy only, it doesn't change the amount of space (or position) of the element on the page. In other words, scaling that element larger will cause it to overlap with the "before" and "after" text.

Is there a simple/reliable way to scale not just the visual representation, but also the amount of space occupied?

Extra points for pure CSS without Javascript. Even more points for a solution that does the right thing with other transformation functions like rotate and skew. This doesn't have to use CSS3 transform, but it does need to be supported across all recent HTML5 capable browsers.

标签： css html5 css3 scale css-transforms

1条回答

来，给爷笑一个

2楼-- · 2019-01-31 17:51

The HTML (Thanks Rory)

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Stack Overflow question http://stackoverflow.com/q/10627306/578288" />
<meta charset=utf-8 />
  <title>Sandbox for SO question about scaling an element both visually and dimensionally</title>
</head>
<body>

  <div id="wrapper">
    <div class="surrounding-content">
      before
    </div>

    <div id="content-to-scale">
      <div>something inside</div>
      <div><img src="http://placekitten.com/g/150/100"></div>
      <div>another something</div>
    </div>

    <div class="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-scale img {
  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

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:

<style type="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.

0人赞添加讨论(0) 举报

Scale/zoom a DOM element and the space it occupies

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

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间