Example:

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;