Skip to content

Instantly share code, notes, and snippets.

@DanElliottPalmer

DanElliottPalmer/index.html

Last active October 2, 2015 15:21
Show Gist options
  • Save DanElliottPalmer/11261524 to your computer and use it in GitHub Desktop.
Save DanElliottPalmer/11261524 to your computer and use it in GitHub Desktop.
Download ZIP
Image resize based on landscape proportions - http://jsbin.com/tigaw/2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>Landscape correct proportions</h3>
<div class="image__panel">
<div class="image__helper"></div>
<div class="image__constrain">
<img class="image__image" src="http://placehold.it/900x600" alt="" />
</div>
</div>
<h3>Portrait correct proportions</h3>
<div class="image__panel">
<div class="image__helper"></div>
<div class="image__constrain">
<img class="image__image" src="http://placehold.it/600x900" alt="" />
</div>
</div>
<h3>Landscape incorrect proportions</h3>
<div class="image__panel">
<div class="image__helper"></div>
<div class="image__constrain">
<img class="image__image" src="http://placehold.it/800x200" alt="" />
</div>
</div>
<h3>Portrait incorrect proportions</h3>
<div class="image__panel">
<div class="image__helper"></div>
<div class="image__constrain">
<img class="image__image" src="http://placehold.it/300x800" alt="" />
</div>
</div>
<h3>Square</h3>
<div class="image__panel">
<div class="image__helper"></div>
<div class="image__constrain">
<img class="image__image" src="http://placehold.it/100x100" alt="" />
</div>
</div>
</body>
</html>
Raw
page.css
.image__panel {
background-color: rgba(255,0,0,0.1);
max-width: 620px;
position: relative;
}
.image__helper {
padding-top: 66.6%;
width: 100%;
}
.image__constrain {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.image__image {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment