Renders a frame with an aspect ratio for images or videos.
Rendering an image with the aspect ratio 4:3.
<.frame ratio={{4, 3}}>
<img src="image.png" alt="An example image illustrating the usage." />
</.frame>
Rendering an image as a circle.
<.frame circle>
<img src="image.png" alt="An example image illustrating the usage." />
</.frame>
<.frame ratio={nil}> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame> <.frame ratio="1-by-1"> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame> <.frame ratio="3-by-2"> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame> <.frame ratio="2-by-3"> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame> <.frame ratio="4-by-3"> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame> <.frame ratio="3-by-4"> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame> <.frame ratio="5-by-4"> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame> <.frame ratio="4-by-5"> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame> <.frame ratio="16-by-9"> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame> <.frame ratio="9-by-16"> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame>
<.frame shape={nil}> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame> <.frame shape="circle"> <img src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true" alt="A dog wearing a colorful poncho walks down a fashion show runway." /> </.frame>