當我對一個元素使用 scale CSS 函數時，盡管它的字體大小相同，但它的文本大小會發生變化。 我想在重新縮放后保持文字大小

Question

問題是我應該在我的項目中使用 scale CSS 函數。 在這種情況下，我想保持文本大小。

trSel.css('transform', 'scale(0.8, 1) translateX(-50px)');
trSel.css('font-size', '2vw');

Answer 1

如果您正在應用transform: scale(...);從邏輯上講，保持實際文本大小是不可能的transform: scale(...); 到容器/父元素。 CSS 變換對指定元素的物理坐標進行直接更改 - 這也強制縮放長度單位。

如果你想保持相同的文本大小，你應該只使用寬度/高度縮放你的父元素，或者對你的文本元素應用反向縮放。

例如：

<div class="parent" style="transform: scale(2)">
   <p class="text" style="transform: scale(0.5)">
      The actual text size of this paragraph will remain as is.
   </p>
</div>