Responsive and simple IMG tag with aspect ratio

PHOTO EMBED

Thu Jun 30 2022 08:37:55 GMT+0000 (UTC)

Saved by @andersdeleuran #css

/* 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;
}
content_copyCOPY

CSS3

https://egghead.io/lessons/css-apply-aspect-ratio-sizing-to-images-with-css-object-fit