Use a consistent frame for a template grid. Choose the image fit rule separately. A regular card does not require a cropped image. Logos, screenshots, and photographs can share a layout while keeping different display rules.
Start with the purpose of the image. A visitor needs to recognise a template preview. Cropping a logo or an important navigation area can remove the information that makes the preview useful.
Separate the frame from the image
The frame controls the card layout. The image controls what visitors can see inside that frame. Keep these as separate decisions.
For example, use a landscape frame for every card. Centre the image inside it. Let an empty margin remain when the source has a different shape. Choose a quiet background so that this margin looks intentional.
A portrait screenshot will occupy less width than a landscape preview. That difference reflects the source. Stretching both to the same shape would change the design being shown.
Choose the correct fit rule
The MDN object-fit reference defines these options for replaced elements such as images:
| Rule | Result | Useful starting point |
|---|---|---|
| contain | Fits the complete image within the box | Logos and complete previews |
| cover | Fills the box and can crop the image | Photographs with safe crop space |
| scale-down | Uses the smaller result of original size and contain | Previews that should not enlarge |
| fill | Fills the box without preserving proportions | Avoid for design previews |
The first column names CSS values. The last column gives an editorial recommendation for a template directory, not a browser requirement.
Use intrinsic sizing for small originals
Intrinsic dimensions are the image's natural dimensions. If an image is smaller than its display area, enlarging it can reveal blur. The scale-down rule keeps a small source at its original size while reducing large sources to fit.
This rule cannot restore detail that the source does not contain. If a preview remains too small to understand, obtain a better original from an authorised source. Adding shadows or enlarging the file does not create missing detail.
Use a separate detail page to show a larger version when one exists. Keep the original source link available so visitors can inspect the current website.
Reserve space before the image loads
Set a stable frame ratio to reduce movement as images arrive. Supply accurate width and height attributes when you know the source dimensions.
The MDN image element reference explains width, height, loading, and responsive source attributes. A width descriptor in srcset must describe the real image width.
Prepare a smaller image for compact cards and a larger image for wider screens. Set sizes to describe the expected layout width. Do not add a source candidate that points to a file you did not generate.
Give each content type a clear rule
Use this practical policy as a starting point:
- Preserve the complete logo.
- Preserve the complete template preview in the directory.
- Crop an editorial photograph only when its subject stays clear.
- Give a long page capture a larger detail view.
- Use a neutral fallback when no image exists.
Apply the rule in a shared component. This keeps the homepage, category pages, and related cards consistent. A local adjustment on one card can otherwise make the next page behave differently.
Check the difficult examples
Use a square logo, a tall screenshot, a wide banner, and a small original. Check both light and dark page backgrounds. Review the result at the narrowest layout your site supports.
Look at the image itself as well as the card. Rounded corners on a frame do not guarantee that the visible artwork has the same corners. Avoid adding multiple heavy outlines to compensate for empty space.
Common questions
Q: Can every image fill the same frame without cropping or distortion?
Only when the source ratios match the frame. Otherwise, preserve some empty space, crop part of the source, or distort it. Complete previews usually justify the empty space.
Q: Does a larger WebP file improve a small source?
No. Encoding a small original at larger dimensions does not recover the original design detail.
Q: Should images below the first screen load immediately?
Lazy loading can defer them. Important visible images need a different loading decision. Check the actual page before assigning high priority to many images.
Browse all templates to compare preview types. Use the mobile checklist to check the result on a phone.
