使用网格时图像不在正确的位置

Question

我有 3 个组件文件和一个 CSS 一个，但由于某种原因，Tiles 向左上角移动了一点。

它没有给我任何错误，但是当我在 firefox 中使用视图网格功能时，单元格中似乎没有图块，左上角的图块看起来比其他图块小

代码如下：

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%;
}

Answer 1

想了想，原来是因为我没有把transform-origin属性设置成top left，默认是center，所以不像我预计

使用网格时图像不在正确的位置

images not being in their right position when using grid

javascript

css

reactjs

create-react-app