在我的页面中间，我有一个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的浏览器中支持它。
答案 0 :(得分：9)
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％来防止图像从父元素的边框中消失，但不会超出其自然尺寸）
这确实有一些缺点：ems中的嵌套字体大小被重复应用。意思是你有：
<style type="text/css">
div{
font-size: 16px;
}
span{
font-size: 0.5em;
}
</style>
<div>
<span>
<span>
Text
</span>
</span>
</div>
你最终会以4px的“文本”渲染而不是你期望的8px。