/* define width, and height for object-fit to work. Aspect.ratio can be 1.0 or 16 / 9 */ /* great for cards with image in top */ img { width: 100%; height: auto; object-fit: cover; /*can be cover, contain, fill, scale-down*/ aspect-ratio: 1.0; } /* great for logos etc. */ img { width: 100%; height: auto; object-fit: scale-down; /*can be cover, contain, fill, scale-down*/ aspect-ratio: 3 / 2; padding: 1rem; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter