缩放/缩放DOM元素及其占用的空间使用CSS3 transform scale（） [英] Scale/zoom a DOM element and the space it occupies using CSS3 transform scale()
问题描述
在我的网页中间，我有一个div元素，其中有一些内容（其他div，图片，无论如何）。
< div>
before
< / div>
< div id =content-to-scale>
< div> something inside< / div>
< div>另一件事< / div>
< / div>
< div>
after
< / div>
我想扩展那个元素（content-to-scale），所有的都是孩子。看起来像一个CSS3变换的缩放操作的工作。但是，问题是这只是对元素层次结构可视化的转换，它不会更改页面上元素的空间（或位置）。换句话说，缩放元素越大，它会与before和after文本重叠。
有一个简单/可靠的方式缩放视觉表示，而且占用的空间量？
纯CSS没有Javascript的额外点。对于与其他转换函数（如旋转和倾斜）正确的事情的解决方案，甚至更多的点。这不需要使用CSS3转换，但它需要在所有最近支持HTML5的浏览器。
HTML（感谢Rory）
<！DOCTYPE html>
< html>
< head>
< meta name =descriptioncontent =Sandbox for Stack Overflow question http://stackoverflow.com/q/10627306/578288/>
< meta charset = utf-8 />
< title> Sandbox for SO关于在视觉和尺寸上缩放元素的问题< / title>
< / head>
< body>
< div id =wrapper>
< div class =ambient-content>
before
< / div>
< div id =content-to-scale>
< div> something inside< / div>
< div>< img src =http://placekitten.com/g/150/100>< / div>
< div>另一件事< / div>
< / div>
< div class =ambient-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％来防止图像从父元素的边框突破，但不能超出其自然尺寸） p>
现在，您可以通过在＃content-to-scale上调整字体大小来控制缩放。 1.1em大致等于scale（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渲染Text p>
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.
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.
这篇关于缩放/缩放DOM元素及其占用的空间使用CSS3 transform scale（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
