Created
September 3, 2019 09:18
-
-
Save azusa-tomita/d900247bc6604d4abdc38be48fd356c0 to your computer and use it in GitHub Desktop.
// source https://jsbin.com/mokopub
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
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title></title> | |
| <style id="jsbin-css"> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| box-sizing:border-box; | |
| } | |
| body{ | |
| padding:1em; | |
| } | |
| .oi, | |
| .css, | |
| .of, | |
| .fb, | |
| .fb_f{ | |
| overflow:hidden; | |
| width:800px; | |
| } | |
| .image{ | |
| float:left; | |
| margin:1em; | |
| width:80px; | |
| height:80px; | |
| border:1px solid red; | |
| } | |
| .css .image > span{ | |
| display:block; | |
| width:100%; | |
| height:100%; | |
| background-repeat: no-repeat; | |
| background-position:center center; | |
| } | |
| .css .contain{ | |
| background-size:contain; | |
| } | |
| .css .cover{ | |
| background-size:cover; | |
| } | |
| .of .image > *{ | |
| width:100%; | |
| height:100%; | |
| object-position:50% 50%; | |
| } | |
| .object-fit_contain { object-fit: contain } | |
| .object-fit_cover { object-fit: cover } | |
| .fb .image{ | |
| position:relative; | |
| overflow: hidden; | |
| } | |
| .fb .image > img{ | |
| position:absolute; | |
| top:-9999px; | |
| right:-9999px; | |
| bottom:-9999px; | |
| left:-9999px; | |
| margin:auto; | |
| } | |
| .fb .image .fb_contain{ | |
| width: 100%; | |
| } | |
| .fb .image.v .fb_contain{ | |
| width:auto; | |
| height:100%; | |
| } | |
| .fb .image .fb_cover{ | |
| min-width: 100%; | |
| min-height: 100%; | |
| } | |
| .fb_f .image{ | |
| overflow:hidden; | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack:center; | |
| -ms-flex-pack:center; | |
| justify-content:center; | |
| -webkit-box-align:center; | |
| -ms-flex-align:center; | |
| align-items:center; | |
| } | |
| // bug fix for ie | |
| .fb_f .image.h{ | |
| -ms-flex-direction:column; | |
| flex-direction:column; | |
| } | |
| .fb_f .image > img{ | |
| display:block; | |
| -webkit-box-flex: 0; | |
| -ms-flex:none; | |
| flex:none; | |
| } | |
| .fb_f .image.h .fb_contain, | |
| .fb_f .image.v .fb_cover{ | |
| width:100%; | |
| min-width:100%; | |
| } | |
| .fb_f .image.v .fb_contain, | |
| .fb_f .image.h .fb_cover{ | |
| height:100%; | |
| min-height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>original image</h2> | |
| <section class="oi"> | |
| <div class="image"><img src="https://dummyimage.com/50x30/000/fff"></div> | |
| <div class="image"><img src="https://dummyimage.com/30x50/000/fff"></div> | |
| <div class="image"><img src="https://dummyimage.com/50x50/000/fff"></div> | |
| <div class="image"><img src="https://dummyimage.com/90x50/000/fff"></div> | |
| <div class="image"><img src="https://dummyimage.com/50x90/000/fff"></div> | |
| <div class="image"><img src="https://dummyimage.com/90x90/000/fff"></div> | |
| </section> | |
| <h2>contain</h2> | |
| <h3>css</h3> | |
| <section class="css"> | |
| <div class="image"><span class="contain" style="background-image:url('https://dummyimage.com/50x30/000/fff');"></span></div> | |
| <div class="image"><span class="contain" style="background-image:url('https://dummyimage.com/30x50/000/fff');"></span></div> | |
| <div class="image"><span class="contain" style="background-image:url('https://dummyimage.com/50x50/000/fff');"></span></div> | |
| <div class="image"><span class="contain" style="background-image:url('https://dummyimage.com/90x50/000/fff');"></span></div> | |
| <div class="image"><span class="contain" style="background-image:url('https://dummyimage.com/50x90/000/fff');"></span></div> | |
| <div class="image"><span class="contain" style="background-image:url('https://dummyimage.com/90x90/000/fff');"></span></div> | |
| </section> | |
| <h3>object-fit</h3> | |
| <section class="of"> | |
| <div class="image"><img class="object-fit_contain" src="https://dummyimage.com/50x30/000/fff"></div> | |
| <div class="image"><img class="object-fit_contain" src="https://dummyimage.com/30x50/000/fff"></div> | |
| <div class="image"><img class="object-fit_contain" src="https://dummyimage.com/50x50/000/fff"></div> | |
| <div class="image"><img class="object-fit_contain" src="https://dummyimage.com/90x50/000/fff"></div> | |
| <div class="image"><img class="object-fit_contain" src="https://dummyimage.com/50x90/000/fff"></div> | |
| <div class="image"><img class="object-fit_contain" src="https://dummyimage.com/90x90/000/fff"></div> | |
| </section> | |
| <h3>fallback(absolute)</h3> | |
| <section class="fb"> | |
| <div class="image h"><img class="fb_contain" src="https://dummyimage.com/50x30/000/fff"></div> | |
| <div class="image v"><img class="fb_contain" src="https://dummyimage.com/30x50/000/fff"></div> | |
| <div class="image h"><img class="fb_contain" src="https://dummyimage.com/50x50/000/fff"></div> | |
| <div class="image h"><img class="fb_contain" src="https://dummyimage.com/90x50/000/fff"></div> | |
| <div class="image v"><img class="fb_contain" src="https://dummyimage.com/50x90/000/fff"></div> | |
| <div class="image h"><img class="fb_contain" src="https://dummyimage.com/90x90/000/fff"></div> | |
| </section> | |
| <h2>cover</h2> | |
| <h3>css</h3> | |
| <section class="css"> | |
| <div class="image"><span class="cover" style="background-image:url('https://dummyimage.com/50x30/000/fff');"></span></div> | |
| <div class="image"><span class="cover" style="background-image:url('https://dummyimage.com/30x50/000/fff');"></span></div> | |
| <div class="image"><span class="cover" style="background-image:url('https://dummyimage.com/50x50/000/fff');"></span></div> | |
| <div class="image"><span class="cover" style="background-image:url('https://dummyimage.com/90x50/000/fff');"></span></div> | |
| <div class="image"><span class="cover" style="background-image:url('https://dummyimage.com/50x90/000/fff');"></span></div> | |
| <div class="image"><span class="cover" style="background-image:url('https://dummyimage.com/90x90/000/fff');"></span></div> | |
| </section> | |
| <h3>object-fit</h3> | |
| <section class="of"> | |
| <div class="image"><img class="object-fit_cover" src="https://dummyimage.com/50x30/000/fff"></div> | |
| <div class="image"><img class="object-fit_cover" src="https://dummyimage.com/30x50/000/fff"></div> | |
| <div class="image"><img class="object-fit_cover" src="https://dummyimage.com/50x50/000/fff"></div> | |
| <div class="image"><img class="object-fit_cover" src="https://dummyimage.com/90x50/000/fff"></div> | |
| <div class="image"><img class="object-fit_cover" src="https://dummyimage.com/50x90/000/fff"></div> | |
| <div class="image"><img class="object-fit_cover" src="https://dummyimage.com/90x90/000/fff"></div> | |
| </section> | |
| <h3>fallback(absolute)</h3> | |
| <section class="fb"> | |
| <div class="image h"><img class="fb_cover" src="https://dummyimage.com/50x30/000/fff"></div> | |
| <div class="image v"><img class="fb_cover" src="https://dummyimage.com/30x50/000/fff"></div> | |
| <div class="image h"><img class="fb_cover" src="https://dummyimage.com/50x50/000/fff"></div> | |
| <div class="image h"><img class="fb_cover" src="https://dummyimage.com/90x50/000/fff"></div> | |
| <div class="image v"><img class="fb_cover" src="https://dummyimage.com/50x90/000/fff"></div> | |
| <div class="image h"><img class="fb_cover" src="https://dummyimage.com/90x90/000/fff"></div> | |
| </section> | |
| <br> | |
| <br> | |
| <br> | |
| <p>absoluteではなくflexを使ってもfallbackが実装できるが、<a href="http://jsdo.it/a_t/U0Q0">box仕様の実装差</a> のためandroid4系で正しく動作しない</p> | |
| <section class="fb_f"> | |
| <div class="image h"><img class="fb_contain" src="https://dummyimage.com/50x30/000/fff"></div> | |
| <div class="image v"><img class="fb_contain" src="https://dummyimage.com/30x50/000/fff"></div> | |
| <div class="image h"><img class="fb_contain" src="https://dummyimage.com/50x50/000/fff"></div> | |
| <div class="image h"><img class="fb_contain" src="https://dummyimage.com/90x50/000/fff"></div> | |
| <div class="image v"><img class="fb_contain" src="https://dummyimage.com/50x90/000/fff"></div> | |
| <div class="image h"><img class="fb_contain" src="https://dummyimage.com/90x90/000/fff"></div> | |
| </section> | |
| <section class="fb_f"> | |
| <div class="image h"><img class="fb_cover" src="https://dummyimage.com/50x30/000/fff"></div> | |
| <div class="image v"><img class="fb_cover" src="https://dummyimage.com/30x50/000/fff"></div> | |
| <div class="image h"><img class="fb_cover" src="https://dummyimage.com/50x50/000/fff"></div> | |
| <div class="image h"><img class="fb_cover" src="https://dummyimage.com/90x50/000/fff"></div> | |
| <div class="image v"><img class="fb_cover" src="https://dummyimage.com/50x90/000/fff"></div> | |
| <div class="image h"><img class="fb_cover" src="https://dummyimage.com/90x90/000/fff"></div> | |
| </section> | |
| <script id="jsbin-source-css" type="text/css">* { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| box-sizing:border-box; | |
| } | |
| body{ | |
| padding:1em; | |
| } | |
| .oi, | |
| .css, | |
| .of, | |
| .fb, | |
| .fb_f{ | |
| overflow:hidden; | |
| width:800px; | |
| } | |
| .image{ | |
| float:left; | |
| margin:1em; | |
| width:80px; | |
| height:80px; | |
| border:1px solid red; | |
| } | |
| .css .image > span{ | |
| display:block; | |
| width:100%; | |
| height:100%; | |
| background-repeat: no-repeat; | |
| background-position:center center; | |
| } | |
| .css .contain{ | |
| background-size:contain; | |
| } | |
| .css .cover{ | |
| background-size:cover; | |
| } | |
| .of .image > *{ | |
| width:100%; | |
| height:100%; | |
| object-position:50% 50%; | |
| } | |
| .object-fit_contain { object-fit: contain } | |
| .object-fit_cover { object-fit: cover } | |
| .fb .image{ | |
| position:relative; | |
| overflow: hidden; | |
| } | |
| .fb .image > img{ | |
| position:absolute; | |
| top:-9999px; | |
| right:-9999px; | |
| bottom:-9999px; | |
| left:-9999px; | |
| margin:auto; | |
| } | |
| .fb .image .fb_contain{ | |
| width: 100%; | |
| } | |
| .fb .image.v .fb_contain{ | |
| width:auto; | |
| height:100%; | |
| } | |
| .fb .image .fb_cover{ | |
| min-width: 100%; | |
| min-height: 100%; | |
| } | |
| .fb_f .image{ | |
| overflow:hidden; | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack:center; | |
| -ms-flex-pack:center; | |
| justify-content:center; | |
| -webkit-box-align:center; | |
| -ms-flex-align:center; | |
| align-items:center; | |
| } | |
| // bug fix for ie | |
| .fb_f .image.h{ | |
| -ms-flex-direction:column; | |
| flex-direction:column; | |
| } | |
| .fb_f .image > img{ | |
| display:block; | |
| -webkit-box-flex: 0; | |
| -ms-flex:none; | |
| flex:none; | |
| } | |
| .fb_f .image.h .fb_contain, | |
| .fb_f .image.v .fb_cover{ | |
| width:100%; | |
| min-width:100%; | |
| } | |
| .fb_f .image.v .fb_contain, | |
| .fb_f .image.h .fb_cover{ | |
| height:100%; | |
| min-height: 100%; | |
| } | |
| </script> | |
| </body> | |
| </html> |
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
| * { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| box-sizing:border-box; | |
| } | |
| body{ | |
| padding:1em; | |
| } | |
| .oi, | |
| .css, | |
| .of, | |
| .fb, | |
| .fb_f{ | |
| overflow:hidden; | |
| width:800px; | |
| } | |
| .image{ | |
| float:left; | |
| margin:1em; | |
| width:80px; | |
| height:80px; | |
| border:1px solid red; | |
| } | |
| .css .image > span{ | |
| display:block; | |
| width:100%; | |
| height:100%; | |
| background-repeat: no-repeat; | |
| background-position:center center; | |
| } | |
| .css .contain{ | |
| background-size:contain; | |
| } | |
| .css .cover{ | |
| background-size:cover; | |
| } | |
| .of .image > *{ | |
| width:100%; | |
| height:100%; | |
| object-position:50% 50%; | |
| } | |
| .object-fit_contain { object-fit: contain } | |
| .object-fit_cover { object-fit: cover } | |
| .fb .image{ | |
| position:relative; | |
| overflow: hidden; | |
| } | |
| .fb .image > img{ | |
| position:absolute; | |
| top:-9999px; | |
| right:-9999px; | |
| bottom:-9999px; | |
| left:-9999px; | |
| margin:auto; | |
| } | |
| .fb .image .fb_contain{ | |
| width: 100%; | |
| } | |
| .fb .image.v .fb_contain{ | |
| width:auto; | |
| height:100%; | |
| } | |
| .fb .image .fb_cover{ | |
| min-width: 100%; | |
| min-height: 100%; | |
| } | |
| .fb_f .image{ | |
| overflow:hidden; | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack:center; | |
| -ms-flex-pack:center; | |
| justify-content:center; | |
| -webkit-box-align:center; | |
| -ms-flex-align:center; | |
| align-items:center; | |
| } | |
| // bug fix for ie | |
| .fb_f .image.h{ | |
| -ms-flex-direction:column; | |
| flex-direction:column; | |
| } | |
| .fb_f .image > img{ | |
| display:block; | |
| -webkit-box-flex: 0; | |
| -ms-flex:none; | |
| flex:none; | |
| } | |
| .fb_f .image.h .fb_contain, | |
| .fb_f .image.v .fb_cover{ | |
| width:100%; | |
| min-width:100%; | |
| } | |
| .fb_f .image.v .fb_contain, | |
| .fb_f .image.h .fb_cover{ | |
| height:100%; | |
| min-height: 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment