1300x850のdivがあります。 描画サイズはこのままで、表示だけ画面いっぱいに拡縮して出来るだけ大きく表示したいです(文章表現として正しいのか分かりません) ウインドウに合わせてDIVのサイズが変化し、内部の全ての要素もそれに合わせてサイズが変化するということです。 あと周りにマージンが少し必要です。 チャットGPTに聞いたら次のコードを書いてくれました。動きは期待通りになっています。 JavaScriptを使わないでCSSだけで書くことはできないでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100vh; overflow: hidden; } body { position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #fff; } div { position: absolute; width: 1300px; height: 850px; transform-origin: center; will-change: transform; image-rendering: pixelated; image-rendering: crisp-edges; -webkit-font-smoothing: none; font-smooth: never; font-size: 3em; background: #ccc; } </style> </head> <body> <div>省略</div> <script> const container = document.querySelector("div"); const baseWidth = 1300; const baseHeight = 850; const updateSize = () => { const margin = 4; const w = window.innerWidth - margin * 2; const h = window.innerHeight - margin * 2; const scale = Math.min(w / baseWidth, h / baseHeight); container.style.transform = `scale(${scale})`; }; window.addEventListener("resize", updateSize); updateSize(); </script> </body> </html>
