A More Effective CSS Image Reset

image-reset.css

/**
 * This CSS block is a More Effective CSS Image Reset. 
 * It resets the default styles of an image element
 * and adds some additional styles to improve its rendering. 
 * 
 * The `max-width: 100%;` ensures that the image does not exceed its container's width, 
 * while maintaining its aspect ratio with `height: auto;`. 
 * 
 * The `vertical-align: middle;` aligns the image vertically with the text. 
 * 
 * The `font-style: italic;` adds a slight italic effect to the image alt text.
 * 
 * The `background-repeat: no-repeat;` ensures that the image does not repeat itself. 
 * 
 * The `background-size: cover;` ensures that the image fills its container without repeating. 
 * 
 * Finally, the `shape-margin: 1rem;` adds some margin around the image to improve its spacing with other elements.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 1rem;
}

Source: Harry Roberts's post on Twitter
Link: https://twitter.com/csswizardry/status/1717841334462005661