CSS缩放以适合内容而不滚动

Question

import React from 'react';
import { render } from 'react-dom';

const width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
const height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

const App = () => (
  <div style={{ display: 'flex', zoom: Math.min(width / 1200, height / 1200),}}>
    {[...Array(5).keys()].map(()=> (
      <div>
        {[...Array(5).keys()].map(() => (
          <div style={{ width: '250px', height: '250px' }}>text</div>
        ))}
      </div>
    ))}
  </div>
);

render(<App />, document.getElementById('root'));

我需要将所有内容完美地放入视口中（即最大宽度和高度，没有水平/垂直滚动条）。

在实际应用中，有不同的组件（图像，自定义组件），因此仅设置font-size: 1vw等是不够的。

上述解决方案并非适用于所有窗口宽度/高度比（有时它会缩放太多/太少）。

我该如何解决这个问题？

Answer 1

您需要将身体边距设置为0，并将宽度/高度设置为1250

document.body.style.margin = "0";
...
  <div style={{ display: 'flex', zoom: Math.min(width / 1250, height / 1250),}}>

工作演示：