mui-extended
Version:
Extended UI Components built on Material UI
10 lines (9 loc) • 669 B
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Box } from "@mui/material";
import { forwardRef } from "react";
export var AspectRatioContainer = forwardRef(function AspectRatioContainer(_a, ref) {
var ratio = _a.ratio, children = _a.children, props = __rest(_a, ["ratio", "children"]);
var paddingTop = (ratio[1] / ratio[0]) * 100 + "%";
return (_jsx(Box, __assign({}, props, { ref: ref, children: _jsx(Box, { sx: { position: "relative", width: "100%", paddingTop: paddingTop }, children: _jsx(Box, { sx: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0 }, children: children }) }) })));
});