如何在 Javascript/CSS 中制作一个大小恒定的盒子？

Question

我正在制作一个基于网格的“绘图”游戏，它有一个区域（一个盒子）可以绘制。在那个盒子里还有其他你可以绘制的盒子（通过改变它们的背景颜色）。我的问题是，例如，如果我将大小从 16x16 更改为 32x32，我怎样才能使主框（绘图区域）保持不变，以便它不会调整大小（当然，该区域内的方块应该缩放以适合新绘图区）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Etch a sketch</title>
</head>
<body>
    <div class='main-container'>
        <div class="container"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

const container = document.querySelector('.container');
const mainContainer = document.querySelector('.main-container');
let size = 16;
mainContainer.style.display = 'grid';
mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
container.style.gridColumnStart = '2';
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(' + size + ', 1fr)';
container.style.gridTemplateRows = 'auto';
container.style.gridAutoColumns = '30px';
container.style.gridAutoRows = '30px';

let element;
for(let i = 0; i < size*size; i++) {
    let element = document.createElement('div');
    element.textContent = '';
    element.onmouseenter = function() {
        console.log('over');
        element.style.background = 'black';
    };
    element.style.border = '1px solid black';
    container.appendChild(element);
}

Answer 1

你需要修正尺寸

container.style.width = '100px'

Answer 2

给你的gridTemplateColumns一个固定的像素值。

container.style.gridTemplateColumns = 'repeat(' + size + ', 20px)';

https://jsfiddle.net/tLy3147s/

编辑：如果您希望绘图区域保持相同的大小并具有适合的正方形比例，则需要根据所需的正方形数计算大小。 现在，改变numSquares一切都应该调整。

const container = document.querySelector('.container');
const mainContainer = document.querySelector('.main-container');
const drawBox = 300;
const numSquares = 16;
let size = drawBox /  numSquares;

mainContainer.style.display = 'grid';
mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
container.style.gridColumnStart = '2';
container.style.width = drawBox + 'px';
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(' + numSquares + ', auto)';
container.style.gridTemplateRows = 'auto';
container.style.gridAutoColumns = size + 'px';
container.style.gridAutoRows = size + 'px';

let element;
for(let i = 0; i < numSquares*numSquares; i++) {
    let element = document.createElement('div');
    element.textContent = '';
    element.onmouseenter = function() {
        console.log('over');
        element.style.background = 'black';
    };
    element.style.border = '1px solid black';
    container.appendChild(element);

https://jsfiddle.net/v4gt2h3f/

如何在 Javascript/CSS 中制作一个大小恒定的盒子？

问题描述

2 个解决方案

解决方案1
0 2019-12-28 14:44:33

解决方案2
0 已采纳 2019-12-28 14:45:50

如何在 Javascript/CSS 中制作一个大小恒定的盒子？

问题描述

2 个解决方案

解决方案1 0 2019-12-28 14:44:33

解决方案2 0 已采纳 2019-12-28 14:45:50

解决方案1
0 2019-12-28 14:44:33

解决方案2
0 已采纳 2019-12-28 14:45:50