Skip to content

Instantly share code, notes, and snippets.

Last active Mar 24, 2020
What would you like to do?
.next-image-button:focus { /* disable focus ring */
outline: none;
.next-image-button:focus-visible { /* enable focus ring for assistive devices */
outline: 3px solid blanchedalmond;
/* avoid layout flash on images by setting default aspect ratio equal to initial width and height of html element */
img {
width: 100%;
height: auto;
aspect-ratio: attr(width) / attr(height);
<img src="hero_image.jpg" alt="" width="500" height="500">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment