Apply aspect ratio and explicit dimensions to prevent layout shift in responsive media cards.
A responsive feed card shifts vertically because its image height is unknown until the image loads. Reserve media space with intrinsic dimensions or CSS aspect-ratio so the layout is stable before loading completes. The common trap is optimizing image bytes but leaving the slot undefined. A smaller image can still cause a layout shift if the browser cannot reserve space. Before ` inside a fluid card gives the browser no reliable height before the file arrives, so text below moves late. After A .media { aspect-ratio: 16 / 9; } wrapper plus img { width:100%; height:100%; object-fit:cover; } keeps the…
Sign up free — one personalized lesson every day, matched to your role and goals.
Already have an account? Sign in