41

在我的页面中间，我有一个 div 元素，其中包含一些内容（其他 div、图像等）。

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

我想缩放那个元素（内容到缩放）和它的所有子元素。似乎是 CSS3 转换的缩放操作的工作。但是，问题在于这只是对该元素层次结构的可视化的转换，它不会改变页面上元素的空间量（或位置）。换句话说，将该元素缩放得更大将导致它与“之前”和“之后”文本重叠。

是否有一种简单/可靠的方法不仅可以缩放视觉表示，还可以缩放占用的空间量？

没有 Javascript 的纯 CSS 加分。对于使用其他转换功能（如旋转和倾斜）做正确事情的解决方案来说，更重要的是。这不必使用 CSS3 转换，但它确实需要在所有支持 HTML5 的最新浏览器中得到支持。

4

1 回答 1

12

HTML（感谢 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>

CSS（仍然从 Rory 的基础开始）

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%;
}

说明：

我正在使用字体大小和 em 来“缩放”子元素的尺寸。

Ems 是相对于当前上下文的字体大小的尺寸单位。

因此，如果我说我的字体大小为 13px，边框为 1（所需的边框宽度以像素为单位）除以 13（当前上下文的字体大小也以像素为单位）= 0.07692307692307693em 浏览器应该呈现 1px边界

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.

于 2012-08-23T06:53:23.780 回答