CSS - 变换后重新对齐内容（删除空白）：scale

Question

到目前为止，我只找到了针对以下问题的非常复杂或非常“hacky”的解决方案：

改造前我有什么

.element1 {
  height: 100px;
  width: 100px;
  background-color: red;
}

.element2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
}

<div class="page">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

当我进行规模变换时我得到了什么：

.element1 {
  height: 100px;
  width: 100px;
  background-color: red;
  transform: scale(0.5);
  transform-origin: top left;
}

.element2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
}

<div class="page">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

变换后我想得到什么：（这个例子不包含变换，我只是硬编码宽度/高度，所以它不是解决方案）

.element1 {
  height: 50px;
  width: 50px;
  background-color: red;
  transform-origin: top left;
}

.element2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
}

<div class="page">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

我有更动态的网站，可以添加额外的内容，我仍然希望它能够很好地对齐。很多解决方案都是以某种方式计算“高度”，但我相信当页面内添加更多项目时可以轻松制动。

这个例子是否有简约的方法，我们可以以某种清晰的方式在变换后保持事物彼此对齐？

Answer 1

正如其他人所描述的，没有直接的方法如何在 CSS 中正确执行此操作。

建议正确使用带有注释的样式，例如

@media only screen and (max-width: 750px)

，您可以在小型设备上以良好的体验方式更改样式。

但是，如果你的时间有限，

scale

本身目前对你来说已经足够好了 - 这就是我在 React 中解决它的方法：

请注意：这是一个非常老套的解决方案，具有硬编码值，尽管它有效，但不建议在生产环境中使用，尤其是对于您想要使用的任何关键组件。

首先，我获得对正在使用比例调整大小的对象的引用

import {useRef} from "react";
const dashboardTableRef = useRef(null);
...
<div ref={dashboardTableRef}>

然后我在 React 中添加动态计算高度的函数，并将该样式添加到我需要调整大小以便再次对齐的组件中。 （我缩放了 0.5，因此我的潜水高度增加了 2）

    function countHeight() {
        if (dashboardTableRef.current?.offsetWidth > 700) {
            return "100%";
        }
        return "" + (dashboardTableRef?.current?.offsetHeight / 2) + "px";
    }
...
<div className="page-body" style={{height: countHeight()}}>

在窗口大小调整结束时，我通过重新设置状态来触发重新渲染 React 页面（尽管我没有更改任何内容）

（默认情况下，调整窗口大小不会触发反应渲染，浏览器会自行执行）

useEffect(() => {
    window.addEventListener("resize", () => {
        setState({...state});
    });
    return () => {
        window.removeEventListener("resize", () => {})
    }
}, []);