Last active
March 24, 2020 21:19
-
-
Save heaversm/aa1c012f061f526fb0e2ccef7e5b4423 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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