使用CSS3变换的scale()函数来缩放/放大DOM元素及其所占用的空间

Question

使用CSS3变换的scale()函数来缩放/放大DOM元素及其所占用的空间

42

我的网页中央有一个 div 元素，其中包含一些内容（其他的 div、图片或者其他任何东西）。

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

我想要缩放该元素(content-to-scale)及其所有子元素。似乎这是CSS3变换(scale)操作的工作。然而，问题在于这只是在元素层次结构的可视化上进行的变换，它不会改变元素在页面上占用的空间(或位置)。换句话说，将该元素放大会导致它与“before”和“after”文本重叠。

有没有一种简单/可靠的方法可以缩放不仅是可视化表示，还包括所占用的空间？

额外的分数给纯CSS而不使用Javascript的解决方案。更多分数给能正确处理其他变换函数，如旋转和倾斜的解决方案。这不必使用CSS3变换，但必须在所有支持HTML5的最新浏览器中都得到支持。

- kanaka

3

这里提供了一个JS Bin让大家进行实验，使用了Stylus作为样式语言。还有一个普通的CSS版本可供使用。 - Rory O'Kane

1

一些 CSS 变换的参考资料：旋转、倾斜和缩放的演示。Mozilla Developer Network 关于 transform 和 transform-origin 属性的文档。 - Rory O'Kane

所以让我明白一下：您想转换子元素，同时在此过程中，您希望CSS更改父元素的高度和宽度。对吗？如果是这样，那么在CSS中不存在子->到->父即向后/向上的层次继承。 - user900360

1

@AnubhavSaini，我在问题中并没有排除JavaScript。我的目标是找到一个简单可靠的解决方案，可以在所有最新的HTML5兼容浏览器上运行（不考虑机制）。纯CSS是理想的选择，但不是必需的。 - kanaka

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lucas Green · Accepted Answer

HTML（谢谢Rory）

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Stack Overflow question https://dev59.com/8Ggv5IYBdhLWcg3wZ_--" />
<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，浏览器应该呈现1像素边框

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

为了控制图像的缩放，我使用我最喜欢的一种方法：自然比例保持比例尺缩放，让我解释一下：

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

（您还可以使用max-width和max-height 100％来防止图像突破父元素的边界，但永远不要超出它们的自然尺寸）

现在您可以通过调整＃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>

你最终会得到“Text”以4px的大小呈现，而不是你可能期望的8px。