Tengo 3 archivos de componentes y uno CSS, pero por alguna razón, los mosaicos se mueven un poco hacia la parte superior izquierda.

no me da ningún error, pero cuando uso la función de cuadrícula de vista en Firefox, parece que los mosaicos no están en las celdas, y el mosaico en la esquina superior izquierda parece más pequeño que cualquier otro mosaico

aquí está el código:

App.jsx :

 import React from 'react'; import tilesPacked from './assets/Tilemap/tiles_packed.png'; import mapjson from './assets/map.json'; import { Map } from './components/map.jsx'; export default function App() { let root = document.querySelector(':root'); root.style.setProperty( '--factor', (window.innerWidth / 64 / 16 + window.innerHeight / 32 / 16) / 2 ); return ( <div className="App"> <Map src={tilesPacked} json={mapjson} className="map" /> </div> ); }

map.jsx :

 import react from 'react'; import { Tile } from './tile.jsx'; export class Map extends react.Component { render() { return ( <div className="Map"> {this.props.json.layers[0].data.map((tile, i) => { return ( <Tile key={i} src={this.props.src} x={tile % 12} y={Math.floor(tile / 12)} /> ); })} </div> ); } }

tile.jsx :

 import React from 'react'; export class Tile extends React.Component { render() { return ( <img src={this.props.src} alt="" className={`tile${this.props.aClass ? ' ' + this.props.aClass : ''}`} style={{ objectPosition: `${(this.props.x - 1) * -16}px ${this.props.y * -16}px`, }} /> ); } }

index.css :

 :root { --factor: 4; } * { margin: 0; padding: 0; box-sizing: border-box; } .tile { height: 16px; width: 16px; object-fit: none; transform: scale(var(--factor)); image-rendering: pixelated; } .Map { display: grid; grid-template-columns: repeat(64, calc(var(--factor) * 16px)); grid-template-rows: repeat(32, calc(var(--factor) * 16px)); } body{ overflow: hidden; width: 100%; height: 100%; }