你能定义 CSS 变换比例的最大宽度/高度吗？

【问题标题】：Can you define a maximum width/height to CSS transform scale?你能定义 CSS 变换比例的最大宽度/高度吗？
【发布时间】：2021-05-13 15:12:28
【问题描述】：

以下代码将内部宽度缩放为 100px。

但是如果外宽是动态的，有没有办法保证缩放后的内宽不会超过50px？

有点像缩放的最大宽度。

.outer {width: 200px; height: 100px; background-color: yellow;  position: relative}
.inner {transform: scale(0.5); background-color: red; transform-origin: center center;}

<div class="outer">
  <div class="inner">&nbsp;</div>
</div>

【问题讨论】：

标签： javascript scale css-transforms

【解决方案1】：

这里不需要转换。根据你的实际情况，你可以使用width: 50%; max-width: 50px; margin: 0 auto;来获得更好的效果，而失去transform和transform-origin：

.outer {width: 200px; height: 100px; background-color: yellow;  position: relative}
.inner {width: 50%; max-width: 50px; margin: 0 auto; background-color: red;}

<div class="outer">
  <div class="inner">&nbsp;</div>
</div>

此外，transform 更改了视觉格式模型并且不包含您正在寻找的max-width 设置。您可以使用一系列 @media 查询来针对特定尺寸获得类似的结果，但您已经在构建响应式代码，因此请继续使用基于百分比的宽度。

【讨论】：