如何将 CSS 缩放原点设置为页面顶部的中间？

Question

我目前正在尝试取消缩放我的整个首页（背景之外），因为它有点太大了。我目前在我网站的 body 元素中使用以下代码：

transform: scale(0.7);

但它似乎将缩放原点设置为页面的中心

我想将首页上的浮动框固定到屏幕顶部（看起来是中心顶部作为原点）。在我添加转换之前，这些框将附加到页面的中心顶部。我想保持这种风格，但要放大。现在，缩放从页面顶部分离浮动框，在页面顶部和浮动框之间留出一些空白 space。我只是想删除那个空的 space 以便未缩放的框位于屏幕顶部。理想情况下，第一行框的顶部 touch/start 在屏幕的最顶部。

也许 "top: 0" 之类的东西需要去某个地方？

这是我网站的 link：https://www.thefloodplains.com/

Answer 1

尝试将 transform-origin: top; 设置为 body 元素，如下所示

body {
    margin: 0;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    background: white;
    transform: scale(0.5);
    -moz-background-size: 100% 100%;
    background: url(OceanWater.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform-origin: top;
}

如何将 CSS 缩放原点设置为页面顶部的中间？

Way to set CSS zoom origin to middle of the top of the page?

html

css

resize

zooming