Media Forced Aspect Ratio
src / Demo.tsx
12345678910111213141516171819202122232425import React, { ReactElement } from "react";
import { MediaContainer } from "@react-md/media";
import styles from "./Container.module.scss";
export default function Demo(): ReactElement {
return (
<>
<MediaContainer height={9} width={16} className={styles.container}>
<img src="https://picsum.photos/400/300?image=3" alt="" />
</MediaContainer>
<MediaContainer height={1} width={1} className={styles.container}>
<img src="https://picsum.photos/400/300?image=623" alt="" />
</MediaContainer>
<MediaContainer height={9} width={16} className={styles.container}>
<iframe
src="https://www.youtube.com/embed/kyAn3fSs8_A"
allowFullScreen
frameBorder="0"
title="YouTube Video"
/>
</MediaContainer>
</>
);
}