Skip to content

Instantly share code, notes, and snippets.

@Mr-Chilly

Mr-Chilly/index.html

Created August 24, 2020 21:17
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 Mr-Chilly/ba26616db8b5ceac836e0a871f7d77a2 to your computer and use it in GitHub Desktop.
Save Mr-Chilly/ba26616db8b5ceac836e0a871f7d77a2 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/robabebada
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
const imageDimensionCalculator = ({ natural, container }, imageFillType) => {
let imageRatio = natural.height / natural.width;
let renderedWidth = 0;
let renderedHeight = 0;
if (imageFillType === 'contain') {
if (natural.width >= natural.height) {
renderedWidth = Math.min(container.width, natural.width);
renderedHeight = renderedWidth * imageRatio;
}
if (natural.width < natural.height) {
renderedHeight = Math.min(container.height, natural.height);
renderedWidth = renderedHeight / imageRatio;
}
}
if (imageFillType === 'cover') {
if (natural.width >= natural.height) {
renderedHeight = Math.min(container.height, natural.height);
renderedWidth = renderedHeight / imageRatio
}
if(natural.width < natural.height) {
renderedWidth = Math.min(container.width, natural.width)
renderedHeight = renderedWidth * imageRatio;
}
}
return {
renderedWidth: renderedWidth,
renderedHeight: renderedHeight,
};
};
0
console.log(
imageDimensionCalculator({
natural: {
width: 630,
height: 1440,
},
container: {
width: 259,
height: 259
}
}, 'cover')
)
</script>
<script id="jsbin-source-javascript" type="text/javascript">
const imageDimensionCalculator = ({ natural, container }, imageFillType) => {
let imageRatio = natural.height / natural.width;
let renderedWidth = 0;
let renderedHeight = 0;
if (imageFillType === 'contain') {
if (natural.width >= natural.height) {
renderedWidth = Math.min(container.width, natural.width);
renderedHeight = renderedWidth * imageRatio;
}
if (natural.width < natural.height) {
renderedHeight = Math.min(container.height, natural.height);
renderedWidth = renderedHeight / imageRatio;
}
}
if (imageFillType === 'cover') {
if (natural.width >= natural.height) {
renderedHeight = Math.min(container.height, natural.height);
renderedWidth = renderedHeight / imageRatio
}
if(natural.width < natural.height) {
renderedWidth = Math.min(container.width, natural.width)
renderedHeight = renderedWidth * imageRatio;
}
}
return {
renderedWidth: renderedWidth,
renderedHeight: renderedHeight,
};
};
0
console.log(
imageDimensionCalculator({
natural: {
width: 630,
height: 1440,
},
container: {
width: 259,
height: 259
}
}, 'cover')
)</script></body>
</html>
Raw
jsbin.robabebada.js
const imageDimensionCalculator = ({ natural, container }, imageFillType) => {
let imageRatio = natural.height / natural.width;
let renderedWidth = 0;
let renderedHeight = 0;
if (imageFillType === 'contain') {
if (natural.width >= natural.height) {
renderedWidth = Math.min(container.width, natural.width);
renderedHeight = renderedWidth * imageRatio;
}
if (natural.width < natural.height) {
renderedHeight = Math.min(container.height, natural.height);
renderedWidth = renderedHeight / imageRatio;
}
}
if (imageFillType === 'cover') {
if (natural.width >= natural.height) {
renderedHeight = Math.min(container.height, natural.height);
renderedWidth = renderedHeight / imageRatio
}
if(natural.width < natural.height) {
renderedWidth = Math.min(container.width, natural.width)
renderedHeight = renderedWidth * imageRatio;
}
}
return {
renderedWidth: renderedWidth,
renderedHeight: renderedHeight,
};
};
0
console.log(
imageDimensionCalculator({
natural: {
width: 630,
height: 1440,
},
container: {
width: 259,
height: 259
}
}, 'cover')
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment