使用 CSS3 转换 scale() 缩放/缩放 DOM 元素及其占用的空间

Posted 2023-02-16

技术标签:

【中文标题】使用 CSS3 转换 scale() 缩放/缩放 DOM 元素及其占用的空间【英文标题】：Scale/zoom a DOM element and the space it occupies using CSS3 transform scale() 【发布时间】：2012-05-24 12:47:48 【问题描述】：

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

【问题讨论】：

这里是a JS Bin for everyone to experiment in，样式语言为Stylus。还有一个plain CSS version。 CSS 转换的一些参考资料：a demo of rotate, skew, and scale。 transform 和 transform-origin 属性上的 Mozilla 开发者网络。所以让我直截了当地说：您想要转换子元素，并且在这样做的同时，您希望 CSS 改变父元素的高度、宽度。正确的？如果是这样，那么就没有 child->to->parent，即 CSS 中的向后/向上分层继承。 @AnubhavSaini，我没有在我的问题中排除 Javascript。我的目标是提供一个简单可靠的解决方案，该解决方案适用于所有最新的支持 HTML5 的浏览器（无论机制如何）。纯 CSS 是理想的，但不是必需的。 【参考方案1】：

HTML（感谢 Rory）

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Stack Overflow question http://***.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%;

解释：

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

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

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

为了模拟 15 像素的填充，我使用相同的公式，（所需像素）/（当前上下文的字体大小，以像素为单位）= 所需的 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>

您最终会以 4 像素而不是您可能期望的 8 像素呈现“文本”。

【讨论】：

起初我以为你可以通过使用rem (“root em”) unit 来解决嵌套的em 问题，但现在我认为这只有在你缩放整个页面时才有效——仅限rem通知根html 元素的字体大小更改。你所说的 em 和 image ratio 可能很正确，但这如何回答关于转换和保持转换后的元素仍然在外部环境中的问题？ JS Bin of this solution。 Version also demonstrating the nested em problem.. @Anubhav Saini：原始问题的最后一行说 kanaka 不需要使用 CSS3 变换，他只需要缩放，以及缩放大小的预期效果决定宽度/高度在布局中。我想用变换来解决它，但根据我的经验，变换对非变换元素的布局/定位没有任何影响。 @JonathanBasile 可能

以上是关于使用 CSS3 转换 scale() 缩放/缩放 DOM 元素及其占用的空间的主要内容，如果未能解决你的问题，请参考以下文章