Size Images and Video for Responsive Layouts

Every image has intrinsic dimensions: its source width and height. Their relationship creates its intrinsic proportions. For example, an illustrative source that is 1200 × 800 pixels has a 3:2 shape.

A fluid .page can become narrower than a large image. Without a sizing limit, the image may extend past its container. Proportional scaling reduces width and height together, so visual shapes keep their intended appearance. Changing width and height independently can cause distortion.

Create a local folder for Local Media Gallery. Put an image in a media folder. This starter example uses media/photo.jpg; if your image has another real name or extension, change the src to match it. Replace the sample alternative text with an accurate description of your chosen image.

Save both complete files below in the same folder. The .page rule uses the fluid, bounded page-container pattern you already know.

Save as index.html.

Save as styles.css. Then open index.html in a browser. The expected render below describes the page when both files are saved and the image path is valid.

A <video> element can play a learner-owned, browser-playable local file through its src attribute. The boolean controls attribute asks the browser to show its built-in playback interface—no JavaScript is needed.

For this sizing practice, choose a short clip without essential audio information. Native controls can look different across browsers; they do not need to match an illustration exactly.

In index.html, add this video below the existing image in Local Media Gallery. The example uses media/clip.mp4.

Put your own browser-playable video in the media folder. If its real filename or extension differs, change the src value to match it. Do not rename an incompatible file just to match this example.

Add below the existing image in index.html.

The existing .media-natural class provides the same proportional scaling for this video that it provided for the image: it limits the displayed width to the container and preserves intrinsic proportions with automatic height.

Do not add a separate forced height. If the player does not load or play, first check the relative path and whether the browser can play that file; CSS sizing cannot repair either problem.

Add the completed markup to your local index.html. If your clip has a different real path, update only the src value to match it. Save, refresh, start playback, and then narrow the browser window.

Check that the player stays inside .page and changes size without distortion. A failed load or failed playback points to the file path or browser compatibility before it points to the proportional-sizing rule.

A source’s intrinsic dimensions describe the proportions built into an image or video. A media frame is different: it is a layout box whose shape you choose for the page.

For Local Media Gallery, create an empty 16:9 media frame before placing media inside it. This isolates the frame’s size from a source’s intrinsic proportions. The frame reserves a deliberate area in the layout, but it does not yet decide how differently shaped media will appear inside.

Inside the existing <main class="page"> on your Local Media Gallery page, add this empty frame below the video. It has no image or video child yet, so its outline makes the frame-sizing behavior visible.

Add below the existing video in the .page container.

Add this rule to styles.css. The border and background only make the empty media frame visible while you test its sizing.

A .media-frame already provides a fluid 16:9 box. Give an image or video inside it the .media-fill class so the media element occupies that box:

• width: 100% and height: 100% size the media element to the media frame.
• object-fit decides how its visual content fits inside that element.

This differs from .media-natural. A media frame has an intentional shape, so a source with different intrinsic proportions needs unused space or intentional cropping to avoid distortion.

Add one fitting class with .media-fill; do not combine .media-natural and .media-fill on the same media element. object-fit changes how content is drawn inside the media element. It does not resize the surrounding .media-frame.

Add these rules below your existing .media-frame rule in styles.css. The default centered alignment is used in both fitting modes.

Add these rules to styles.css.

In index.html, replace the empty <div class="media-frame"></div> from the 16:9 frame test with this complete media frame. It uses your existing local video path; update the path only if your real file differs.

Save, refresh, and play your local clip with .fit-contain. Then change only the fitting class to .fit-cover, refresh, and play the relevant sequence again.

With contain, all of the source remains visible, though unused space may appear. With cover, the media frame fills, but content near an edge can be lost. Keep contain when every detail or action matters. Keep cover only when the visible crop still preserves the intended meaning. Restore the class that fits your own clip.

Watch why a crop that looks safe at the beginning can remove meaningful action later in a video sequence.

A video can have a correct media frame and still be hard to operate. Treat these as separate checks:

• Visual fit: proportional scaling prevents distortion, and your contain or cover choice keeps meaningful content visible.
• Playback usability: the native play/pause button, seek control, and any other available controls need enough usable space.

object-fit changes how image or video content is drawn inside its box. It does not enlarge, move, or rearrange the browser’s native controls. Control designs and available features can differ between browsers.

Open your local Local Media Gallery and make the browser window narrow enough to resemble a small viewport. Perform this focused check on the video:

1. Confirm that the picture still has proportional scaling—no stretched faces, circles, or objects.
2. If you use cover, confirm that the meaningful action stays visible throughout the relevant sequence.
3. Check that the page has no horizontal overflow.
4. Use play/pause and seek where your browser exposes it.
5. Put focus on the player, then use Tab to check access to the controls your browser makes available.

This is a focused media check, not a full device or zoom test.

You will now combine the techniques from this tutorial into Local Media Gallery. The finished page has two deliberate modes:

• A photo that uses proportional scaling and keeps its intrinsic proportions.
• A video inside a 16:9 media frame. The frame has an intentional shape; the video uses a fitting mode to preserve its proportions.

Your goal is not to make every box look full. First decide whether a source needs its natural shape or a deliberate frame. Then prevent distortion, assess any intentional cropping, and check the player at a narrow width.

In your local folder, keep index.html, styles.css, and the media folder. Put your own browser-playable image and video in that folder.

This complete example uses media/photo.jpg and media/clip.mp4. Change each path and extension if your real files differ. Replace the sample image alternative text with an accurate description of your chosen image.

index.html — replace the file contents with this complete page.

styles.css — replace the file contents with these sizing rules.