您可以定义最大 width/height 到 CSS 的变换比例吗？

Question

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

但是如果外部宽度是动态的，有没有办法确保缩放后的内部宽度不会超过 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>

Answer 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 查询获得类似的结果，但您已经在构建响应式代码，因此请继续使用基于百分比的宽度。

您可以定义最大 width/height 到 CSS 的变换比例吗？

Can you define a maximum width/height to CSS transform scale?

javascript

scale

css-transforms