Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 19, 2016 02:08
Show Gist options
  • Save anonymous/e7a83f853b5ee4104fb5e94168d6a465 to your computer and use it in GitHub Desktop.
Save anonymous/e7a83f853b5ee4104fb5e94168d6a465 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/bidemaxide
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.mask {
width: 300px;
height: 300px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="mask">
<img src="http://lorempixel.com/600/500" onload="fixSize(this.parentNode)" />
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script id="jsbin-javascript">
"use strict";
function fixSize(target) {
var $parent = $(target);
var $child = $parent.children();
var pWidth = parseInt($parent.width(), 10);
var pHeight = parseInt($parent.height(), 10);
var cWidth = parseInt($child.width(), 10);
var cHeight = parseInt($child.height(), 10);
var nWidth = cWidth * pHeight / cHeight;
var nHeight = cHeight * pWidth / cWidth;
var centerX = (nWidth - pWidth) / 2;
var centerY = (nHeight - pHeight) / 2;
if (cHeight * pWidth / cWidth < pHeight) {
$child.attr("style", "width: " + cWidth * pHeight / cHeight + "px; height: " + pHeight + "px; margin-left: -" + centerX + "px");
} else {
$child.attr("style", "width: " + pWidth + "px; height: " + cHeight * pWidth / cWidth + "px; margin-top: -" + centerY + "px");
}
}
</script>
<script id="jsbin-source-css" type="text/css">.mask {
width: 300px;
height: 300px;
overflow: hidden;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function fixSize(target) {
const $parent = $(target);
const $child = $parent.children();
const pWidth = parseInt($parent.width(), 10);
const pHeight = parseInt($parent.height(), 10);
const cWidth = parseInt($child.width(), 10);
const cHeight = parseInt($child.height(), 10);
const nWidth = cWidth*pHeight/cHeight
const nHeight = cHeight*pWidth/cWidth
const centerX = (nWidth-pWidth)/2;
const centerY = (nHeight-pHeight)/2;
if(cHeight*pWidth/cWidth < pHeight) {
$child.attr("style", "width: "+cWidth*pHeight/cHeight+"px; height: "+pHeight+"px; margin-left: -"+centerX+"px");
}
else {
$child.attr("style", "width: "+pWidth+"px; height: "+cHeight*pWidth/cWidth+"px; margin-top: -"+centerY+"px");
}
}</script></body>
</html>
Raw
jsbin.bidemaxide.css
.mask {
width: 300px;
height: 300px;
overflow: hidden;
}
Raw
jsbin.bidemaxide.js
"use strict";
function fixSize(target) {
var $parent = $(target);
var $child = $parent.children();
var pWidth = parseInt($parent.width(), 10);
var pHeight = parseInt($parent.height(), 10);
var cWidth = parseInt($child.width(), 10);
var cHeight = parseInt($child.height(), 10);
var nWidth = cWidth * pHeight / cHeight;
var nHeight = cHeight * pWidth / cWidth;
var centerX = (nWidth - pWidth) / 2;
var centerY = (nHeight - pHeight) / 2;
if (cHeight * pWidth / cWidth < pHeight) {
$child.attr("style", "width: " + cWidth * pHeight / cHeight + "px; height: " + pHeight + "px; margin-left: -" + centerX + "px");
} else {
$child.attr("style", "width: " + pWidth + "px; height: " + cHeight * pWidth / cWidth + "px; margin-top: -" + centerY + "px");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment