CSS Tips — Practical img Element Defaults
A line-by-line guide through the sensible CSS for image elements.
A line-by-line guide through the sensible CSS for image elements you should apply in all your projects to make your img elements bulletproof by default.
All credit goes to Harry Roberts, who originally shared this technique on Twitter.
Chapters
- 00:00 Why you should use this technique
- 00:49 Demo setup
- 01:12 Fix distorted images
- 02:14 Fix empty space under images
- 03:02 Style alt text
- 03:59 Style low-quality image placeholders (LQIP)
- 05:07 Add margin for shape-outside
