1## Sizing and positioning
2 
3Use the `style` prop to control size and position:
4 
5```tsx
6<Img
7  src={staticFile("photo.png")}
8  style={{
9    width: 500,
10    height: 300,
11    position: "absolute",
12    top: 100,
13    left: 50,
14    objectFit: "cover",
15  }}
16/>
17```
18 
19## Dynamic image paths
20 
21Use template literals for dynamic file references:
22 
23```tsx
24import { Img, staticFile, useCurrentFrame } from "remotion";
25 
26const frame = useCurrentFrame();
27 
28// Image sequence
29<Img src={staticFile(`frames/frame${frame}.png`)} />
30 
31// Selecting based on props
32<Img src={staticFile(`avatars/${props.userId}.png`)} />
33 
34// Conditional images
35<Img src={staticFile(`icons/${isActive ? "active" : "inactive"}.svg`)} />
36```
37 
38This pattern is useful for:
39 
40- Image sequences (frame-by-frame animations)
41- User-specific avatars or profile images
42- Theme-based icons
43- State-dependent graphics
44 
45## Getting image dimensions
46 
47Use `getImageDimensions()` to get the dimensions of an image:
48 
49```tsx
50import { getImageDimensions, staticFile } from "remotion";
51 
52const { width, height } = await getImageDimensions(staticFile("photo.png"));
53```
54 
55This is useful for calculating aspect ratios or sizing compositions:
56 
57```tsx
58import {
59  getImageDimensions,
60  staticFile,
61  CalculateMetadataFunction,
62} from "remotion";
63 
64const calculateMetadata: CalculateMetadataFunction = async () => {
65  const { width, height } = await getImageDimensions(staticFile("photo.png"));
66  return {
67    width,
68    height,
69  };
70};
71```
72