Skip to content

Instantly share code, notes, and snippets.

@embayer

embayer/flex-img-container.html

Created September 28, 2015 15:45
Show Gist options
  • Save embayer/f2fbe97cba3a667b6e3d to your computer and use it in GitHub Desktop.
Save embayer/f2fbe97cba3a667b6e3d to your computer and use it in GitHub Desktop.
Download ZIP
display images of different sizes within a fixed size div
Raw
flex-img-container.html
<html>
<head>
<title>kitten store</title>
<style>
.img-container {
width: 600px;
height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.even {
background: cyan;
}
.odd {
background: yellow;
}
.img {
width: 100%;
height: auto;
max-width: 600px;
max-height: 800px;
}
.tiny {
max-width: 300px;
}
</style>
</head>
<body>
<h1>flexible image container demo</h1>
<h2>img-container is a flexbox</h2>
<ul>
<li>
width: 600px;
</li>
<li>
height: 800px;
</li>
</ul>
<h2>img</h2>
<ul>
<li>
width: 100%;
</li>
<li>
height: auto;
</li>
<li>
max-width: 600px;
</li>
<li>
max-height: 800px;
</li>
</ul>
<p>extra small images have a separate class: max-widht: 300px;</p>
<h2>landscape smaller than container</h2>
<div class="img-container even">
<img class="img" src="http://lorempixel.com/500/380/cats/1/">
</div>
<h2>portrait smaller than container</h2>
<div class="img-container odd">
<img class="img" src="http://lorempixel.com/380/500/cats/1/">
</div>
<h2>landscape much smaller than container</h2>
<div class="img-container even">
<img class="img tiny" src="http://lorempixel.com/100/76/cats/1/">
</div>
<h2>portrait much smaller than container</h2>
<div class="img-container odd">
<img class="img tiny" src="http://lorempixel.com/76/100/cats/1/">
</div>
<h2>portrait bigger than container</h2>
<div class="img-container odd">
<img class="img" src="http://lorempixel.com/760/1000/cats/1/">
</div>
<h2>landscape bigger than container</h2>
<div class="img-container even">
<img class="img" src="http://lorempixel.com/1000/760/cats/1/">
</div>
<h2>cubic smaller than container</h2>
<div class="img-container even">
<img class="img" src="http://lorempixel.com/500/500/cats/1/">
</div>
<h2>cubic bigger than container</h2>
<div class="img-container odd">
<img class="img" src="http://lorempixel.com/1000/1000/cats/1/">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment