How to show packed sprites with CSS and scale them

Example:

<div style="width: 56px; height: 56px; position: relative; background: red;">
    <div style="
        background-image: url('https://ivangospodinow.com/wp-content/uploads/2022/10/texture-example.jpg');
        width: 56px;
        height: 56px;
        background-position:-113px -113px;
        background-repeat: no-repeat;
        display: inline-block;
        transform: scale(1, 1);
        top: 0px;
        left: 0px;
        margin-top: 0;
        margin-left: 0;
        position: absolute;">
    </div>
</div>
<br />
<div style="width: 112px; height: 112px; position: relative; background: red;">
    <div style="
        background-image: url('https://ivangospodinow.com/wp-content/uploads/2022/10/texture-example.jpg');
        width: 56px;
        height: 56px;
        background-position:-113px -113px;
        background-repeat: no-repeat;
        display: inline-block;
        transform: scale(2, 2);
        top: 0px;
        left: 0px;
        margin-top: 28px;
        margin-left: 28px;
        position: absolute;">
    </div>
</div>

Reactjs component and calculations:

import React from 'react';

type props = {
    width: number,
    height: number,
    frame: { x: number, y: number, w: number, h: number },
    textureUrl: string,
    background?: string,
};

class TextureImageResizeComponent extends React.Component<props> {

    render() {
        let {
            width,
            height,
            background,
            frame,
            textureUrl,
        } = this.props;


        if (width === 0) {
            width = frame.w;
        }

        if (height === 0) {
            height = frame.h;
        }

        return (
            <div style={{
                width: width,
                height: height,
                position: 'relative',
                background: background,
            }}>
                <div style={{
                    backgroundImage: 'url(' + textureUrl + ')',
                    width: frame.w,
                    height: frame.h,
                    backgroundPosition: '-' + frame.x + 'px -' + frame.y + 'px',
                    backgroundRepeat: 'no-repeat',
                    display: 'inline-block',
                    transform: 'scale(' + (width / frame.w) + ', ' + (height / frame.h) + ')',
                    top: 0,
                    left: 0,
                    marginTop: ((height - frame.h) / 2),
                    marginLeft: ((width - frame.w) / 2),
                    position: 'absolute',
                }}>

                </div>
            </div>
        );
    }
}

export default TextureImageResizeComponent;