Posted Wednesday, November 1, 2023

Some sensible defaults for your img elements ↗

Tweet from Harry Roberts, csswizardry

img {
  max-width: 100%;              /* [1] */
  height: auto;                 /* [1] */
  vertical-align: middle;       /* [2] */
  font-style: italic;           /* [3] */
  background-repeat: no-repeat; /* [4] */
  background-size: cover;       /* [4] */
  shape-margin: 0.75rem;        /* [5] */
}

Harry notes that adding font-style: italic is to make alt text look different from regular text.