时间戳

首页 > 解决方案 > CSS 在 flexbox 中缩放 html 内容

css - CSS 在 flexbox 中缩放 html 内容

问题描述

有关 javascript 尝试的示例，请参见问题结尾

我正在尝试创建在 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 示例 CodeSandbox (svelte)

标签： cssflexboxscalingcss-transforms

解决方案

对于完整的 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>

推荐阅读