Html 使用 CSS3 变换 scale() 缩放/缩放 DOM 元素及其占用的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10627306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scale/zoom a DOM element and the space it occupies using CSS3 transform scale()
提问by kanaka
In the middle of my page I have a div element with some content in it (other divs, images, whatever).
在我的页面中间，我有一个 div 元素，其中包含一些内容（其他 div、图像等）。
<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.
我想缩放该元素（按内容缩放）及其所有子元素。看起来像是 CSS3 变换缩放操作的工作。但是，问题在于这只是对该元素层次结构的可视化的转换，它不会更改页面上元素的空间量（或位置）。换句话说，放大该元素将导致它与“之前”和“之后”文本重叠。
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 thingwith 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.
没有 Javascript 的纯 CSS 的加分。使用其他转换函数（如旋转和倾斜）做正确事情的解决方案的更多点。这不必使用 CSS3 转换，但它确实需要在所有最新的支持 HTML5 的浏览器中得到支持。
采纳答案by Lucas Green
The HTML (Thanks Rory)
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>
The CSS (Still started from Rory's base)
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%;
}
The Explanation:
说明：
I'm using font size and ems to "scale" the dimensions of the child elements.
我正在使用字体大小和 em 来“缩放”子元素的尺寸。
Ems are dimension units that are relative to the current context's font-size.
Ems 是相对于当前上下文字体大小的维度单位。
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
因此，如果我说我的字体大小为 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
为了模拟 15px 填充，我使用相同的公式，（所需像素）/（当前上下文的字体大小（以像素为单位））=所需的 em。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.
图像具有自然的高度和宽度以及它们之间的比率。如果宽度和高度都设置为自动，大多数浏览器将保留此比例。然后，您可以使用 min-width 和 max-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)
（您还可以使用 max-width 和 max-height 100% 来防止图像超出父元素的边界，但永远不要超出其自然尺寸进行缩放）
You can now control the scaling by tweaking the font-size on #content-to-scale. 1.1em roughly equals scale(1.1)
您现在可以通过调整 #content-to-scale 上的字体大小来控制缩放。1.1em 大致等于 scale(1.1)
This does have some drawbacks: nested font-sizing in ems are applied recusively. Meaning if you have:
这确实有一些缺点：ems 中的嵌套字体大小是递归应用的。意思是如果你有：
<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.
您最终会以 4px 而不是您期望的 8px 呈现“文本”。
