Created
May 18, 2017 03:29
-
-
Save AmatsukiKu/5662e0413d4e048f7c6646c1417f56fb to your computer and use it in GitHub Desktop.
複数のサイズを指定したsrcsetのサンプル
This file contains 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
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| img { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| padding: 0; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-flow: row wrap; | |
| list-style: none; | |
| justify-content: space-between; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img sizes="(max-width: 320px) 49vw, 33vw" srcset="https://dummyimage.com/100x100/000/fff 100w, https://dummyimage.com/200x200/000/fff 200w, https://dummyimage.com/300x300/000/fff 300w, https://dummyimage.com/400x400/000/fff 400w, https://dummyimage.com/500x500/000/fff 500w, https://dummyimage.com/600x600/000/fff 600w, https://dummyimage.com/700x700/000/fff 700w, https://dummyimage.com/800x800/000/fff 800w" src="https://dummyimage.com/10x10/000/fff" /> | |
| <img sizes="(max-width: 320px) 49vw, 33vw" srcset="https://dummyimage.com/100x100/000/fff 100w, https://dummyimage.com/200x200/000/fff 200w, https://dummyimage.com/300x300/000/fff 300w, https://dummyimage.com/400x400/000/fff 400w, https://dummyimage.com/500x500/000/fff 500w, https://dummyimage.com/600x600/000/fff 600w, https://dummyimage.com/700x700/000/fff 700w, https://dummyimage.com/800x800/000/fff 800w" src="https://dummyimage.com/10x10/000/fff" /> | |
| <img sizes="(max-width: 320px) 49vw, 33vw" srcset="https://dummyimage.com/100x100/000/fff 100w, https://dummyimage.com/200x200/000/fff 200w, https://dummyimage.com/300x300/000/fff 300w, https://dummyimage.com/400x400/000/fff 400w, https://dummyimage.com/500x500/000/fff 500w, https://dummyimage.com/600x600/000/fff 600w, https://dummyimage.com/700x700/000/fff 700w, https://dummyimage.com/800x800/000/fff 800w" src="https://dummyimage.com/10x10/000/fff" /> | |
| <img sizes="(max-width: 320px) 49vw, 33vw" srcset="https://dummyimage.com/100x100/000/fff 100w, https://dummyimage.com/200x200/000/fff 200w, https://dummyimage.com/300x300/000/fff 300w, https://dummyimage.com/400x400/000/fff 400w, https://dummyimage.com/500x500/000/fff 500w, https://dummyimage.com/600x600/000/fff 600w, https://dummyimage.com/700x700/000/fff 700w, https://dummyimage.com/800x800/000/fff 800w" src="https://dummyimage.com/10x10/000/fff" /> | |
| <img sizes="(max-width: 320px) 49vw, 33vw" srcset="https://dummyimage.com/100x100/000/fff 100w, https://dummyimage.com/200x200/000/fff 200w, https://dummyimage.com/300x300/000/fff 300w, https://dummyimage.com/400x400/000/fff 400w, https://dummyimage.com/500x500/000/fff 500w, https://dummyimage.com/600x600/000/fff 600w, https://dummyimage.com/700x700/000/fff 700w, https://dummyimage.com/800x800/000/fff 800w" src="https://dummyimage.com/10x10/000/fff" /> | |
| <img sizes="(max-width: 320px) 49vw, 33vw" srcset="https://dummyimage.com/100x100/000/fff 100w, https://dummyimage.com/200x200/000/fff 200w, https://dummyimage.com/300x300/000/fff 300w, https://dummyimage.com/400x400/000/fff 400w, https://dummyimage.com/500x500/000/fff 500w, https://dummyimage.com/600x600/000/fff 600w, https://dummyimage.com/700x700/000/fff 700w, https://dummyimage.com/800x800/000/fff 800w" src="https://dummyimage.com/10x10/000/fff" /> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment