Created
July 3, 2025 12:04
-
-
Save georg-jung/7ba1a71555a3e773967f7c882bf404f4 to your computer and use it in GitHub Desktop.
Viewport-filling HTML Image Comparison with Slider
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Image Comparison</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
| <script defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css" /> | |
| <style> | |
| body, | |
| html { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| img { | |
| width: 100%; | |
| height: auto; | |
| max-height: 100vh; | |
| } | |
| .container { | |
| width: 100%; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| img-comparison-slider:focus { | |
| outline: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img-comparison-slider> | |
| <img slot="first" src="1.jpg" /> | |
| <img slot="second" src="2.jpg" /> | |
| </img-comparison-slider> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment