Skip to content

Instantly share code, notes, and snippets.

@azusa-tomita

azusa-tomita/index.html

Created September 3, 2019 09:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save azusa-tomita/d900247bc6604d4abdc38be48fd356c0 to your computer and use it in GitHub Desktop.
Save azusa-tomita/d900247bc6604d4abdc38be48fd356c0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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>
Raw
jsbin.mokopub.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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment