CSS 在 flexbox 中缩放 html 内容

Question

For examples of a javascript attempt see end of question

我试图在 HTML 应用程序中创建处理 A4 文档的错觉，并希望仅使用 CSS 将我的 A4 页面缩放到其父元素的大小。当父元素因为（例如）浏览器缩放而变小时，我希望内容保持相同的比例但更小，缩放以适合父元素。

我更喜欢纯 CSS 解决方案，但如果没有其他方法，我不介意使用 JavaScript 来测量父级的尺寸并缩放子级以适合。

JS 中的示例代码：

    var page = document.getElementsByClassName("page")[0];
    var scaleX = page.parentElement.clientWidth / page.clientWidth;
    
    if (scaleX < 1) {
      page.setAttribute("style", `transform:scale(${scaleX});`);
    }

我目前的样式如下：

  .page-container {
    height: 7cm;
    width: 6cm;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem;
    background: orange;
    display: flex;
    flex-direction: column;
    resize: both;
    align-items: center;
    justify-content: flex-start;
    align-content: flex-start;
  }
  .page {
    min-height: 29.7cm !important;
    max-height: 29.7cm !important;
    height: 29.7cm !important;
    width: 21cm !important;
    background: white;
    padding: 21mm;
    border: 1px solid gray;
  }

JS版本的示例可以在这里找到，我不知道如何删除页面元素周围的空白。

JSBin example CodeSandbox (svelte)

Answer 1

对于完整的 CSS 方法，您必须将页面容器宽度设置为视口的百分比。此处固定宽度是不可能的，因为您希望容器在调整视口大小时缩放。

然后您将页面宽度设置为视口的 100%。根据a4比例计算页面高度。然后将页面包装在单独的 div 中（也设置为视口的 100%）并通过计算页面容器与页面之间的比率将 div 缩放回页面容器的宽度宽度。

要进行这些计算，您可以使用 CSS 变量。您可以稍后在 CSS 中使用 calc() 函数将其转换为视口单位。例如：width: calc( var(--page-width) * 1vw );.

现在一切都基于您选择的页面容器宽度和初始页面宽度相互关联。一切都应该相应地缩放。

:root {
    --container-width: 35;
    --page-width: 100;
    --page-height: calc( var(--page-width) * 1.41 );
    --font-size: calc( var(--page-width) / 50 );
    --ratio: calc( var(--container-width) / var(--page-width) );
}

html {
    width: 100%;
    height: 100%; 
}

body { 
    margin: 0;
    background: silver;
    width: 100%;
    height: 100%; 
  overflow: hidden;
    padding-top: 5%;
    font-size: calc( var(--font-size) * 1vw );
}

 .page-container {
    width: calc( var(--container-width) * 1vw );
    height: 90%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 auto;
}

.page-wrapper {
    width: calc( var(--page-width) * 1vw );
    height: 0; /* So there is no dead space after scaling */
    margin: 0;
    padding: 0;
    transform-origin: top left;
    -ms-transform: scale( var(--ratio), var(--ratio) ); /* IE 9 */
        transform: scale( var(--ratio), var(--ratio) ); /* Standard syntax */
}

.page {
    width: calc( var(--page-width) * 1vw );
    height: calc( var(--page-height) * 1vw );
    background: white;
    box-sizing: border-box;
    border: 1px solid grey;
    margin-bottom: 1vw;
    padding:2vw 4vw;
}

<html>
    <body>
        <div class="page-container">
            <div class="page-wrapper">
                <div class="page">
                    <h1>Test page 1</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <div class="page">
                    <h1>Test page 2</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <div class="page">
                    <h1>Test page 3</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
    </body>
</html>

CSS 在 flexbox 中缩放 html 内容

CSS scale html content in flexbox

css

scaling

flexbox

css-transforms