Image reset
Three lines that fix the classic image quirks: the inline-block gap under images, overflow on narrow viewports, and broken aspect ratios on flex/grid children.
4px gap below, can overflow container
No gap, constrained to container width
Quick implementation
/* Core image reset — eliminates inline-block gap and overflow */
img,
picture,
video,
canvas,
svg {
display: block; /* removes inline-block baseline gap */
max-width: 100%; /* never overflow the container */
height: auto; /* preserve aspect ratio when width is constrained */
}
/* Ensure images fill their flex/grid cell correctly */
img {
object-fit: cover; /* crop rather than stretch when size is fixed */
}
/* Broken image fallback — shows alt text clearly */
img::after {
content: attr(alt);
display: block;
font-size: 0.875rem;
color: oklch(0.6 0.02 260);
padding: 0.5rem;
}Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer writing a CSS image reset.
Goal: Fix all common image layout bugs across img, picture, video,
canvas, and svg elements.
Issues to solve:
1. The inline-block gap (4px below images inside containers)
2. Images overflowing narrow containers on mobile
3. Broken aspect ratios when images are flex or grid children
4. Broken/missing image alt text display
Constraints:
- display: block removes the baseline gap
- max-width: 100% + height: auto for responsive images
- Explain when to use object-fit: cover vs contain
- Show the ::after pseudo-element trick for visible broken-image alt text
- Note that SVG behaves differently from raster images and may need
explicit width/height attributes
Framework variant: Show how Next.js <Image> and Astro's image
components handle these resets automatically, and what you still
need to add manually.
Return only the CSS with inline comments.The inline-block baseline gap
Images are inline by default, which means they sit on the text baseline. The browser reserves space below the baseline for descenders (the bottom of letters like g, y, p). This creates a ~4px gap under images inside containers. Setting display: block removes the image from the inline flow entirely — no baseline, no gap. Alternatively, vertical-align: bottom on the image achieves the same result without changing the display type.
height: auto and aspect ratio
Without height: auto, an image with an explicit height set in CSS (or inherited from a stretched flex cell) will squash or stretch as the width changes. height: auto tells the browser to recalculate height from the intrinsic aspect ratio whenever width changes — the image scales proportionally. In modern CSS, aspect-ratio: attr(width) / attr(height) achieves the same result and prevents layout shift even before the image loads, but browser support for attr() in aspect-ratio is limited — the height attribute on the HTML element itself is the reliable approach.