现在，您可以通过调整＃content-to-scale的字体大小来控制缩放。 1.1em大致等于比例（1.1）

Question

在我的页面中间，我有一个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的浏览器中支持它。

Answer 1

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

说明：

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

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

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

要模拟15px填充，我使用相同的公式，（所需像素）/（当前上下文的字体大小，以像素为单位）=所需的ems。 15/13 = 1.1538461538461537em

为了驯服图像的缩放，我使用了我最喜欢的图像：保留比例的自然比例，让我解释一下：

图像具有自然的高度和宽度以及它们之间的比率。如果宽度和高度都设置为自动，大多数浏览器将保留此比率。然后，您可以使用min-width和max-width控制所需的宽度，在这种情况下，使其始终缩放到父元素的整个宽度，即使它将超出其自然宽度。

（您还可以使用max-width和max-height 100％来防止图像从父元素的边框中消失，但不会超出其自然尺寸）

现在，您可以通过调整＃content-to-scale的字体大小来控制缩放。 1.1em大致等于比例（1.1）

这确实有一些缺点：ems中的嵌套字体大小被重复应用。意思是你有：

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

你最终会以4px的“文本”渲染而不是你期望的8px。

使用CSS3变换scale（）缩放/缩放DOM元素及其占用的空间

1 个答案:

现在，您可以通过调整＃content-to-scale的字体大小来控制缩放。 1.1em大致等于比例（1.1）