If you're working on a website that needs to look good across all devices but also wants fast load times tablet/macbook/, this snippet is for YOU!
/'' Flexible image resizing ''/img {max-width: calc(100vw - (3 * rem));}This simple trick ensures images are responsive and don't take up more space than necessary on larger screens, while still looking crisp.
For bonus points:
- Use `srcset` for different resolutions
<img src="small. jpg" alt=" sizes="(max-width: 600px) small. jpg,(min-width:1284px ) large. png"srcset="tiny-small_375w. webp webp, // iPhone SE/Plus / iPad Minitiny-medium-9.7in_xl. jpeg jpeg" alt=" >
It's like magic - making your website look great and fast without breaking a sweat! ⚡