Files
react-test/docs/data/joy/components/aspect-ratio/MediaRatio.tsx

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

17 lines
549 B
TypeScript
Raw Normal View History

2025-12-12 14:26:25 +09:00
import AspectRatio from '@mui/joy/AspectRatio';
import Box from '@mui/joy/Box';
export default function MediaRatio() {
return (
<Box sx={{ width: 300, borderRadius: 'sm', p: 1 }}>
<AspectRatio objectFit="contain">
<img
src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
alt="A beautiful landscape."
/>
</AspectRatio>
</Box>
);
}