In this article, we are going to implement an aspect ratio calculator. An aspect ratio calculator proves to be a useful tool for individuals seeking to determine the proportions of images or videos based on their width and height. Our aspect ratio calculator has a live preview option that enables users to visualize how adjustments in width and height impact the image’s aspect ratio.
Prerequisites
Approach
- The HTML file comprises input fields for width and height, allowing users to define the desired dimensions. Additionally, it includes a drop-down menu offering commonly used aspect ratios and designated areas to display the results.
- CSS styles enhance the visual appeal of the calculator, providing it with a clean and responsive design adorned by a subtle color scheme. The centered container adds to its aesthetic charm, while the input styling contributes to a seamless user experience. Additionally, users can enjoy a visually captivating image preview feature.
- JavaScript takes care of handling input changes, performing calculations for different aspect ratios (diagonal, x:1 format, and w:h format), and dynamically updating the image preview. To enhance user-friendliness, the “Set Common Ratio” function automatically fills in inputs with frequently used aspect ratios.
Example
Javascript
// Script.js const calculateAspectRatio = () => { const widthInput =
document.getElementById( "width" );
const heightInput =
document.getElementById( "height" );
const width = parseFloat(widthInput.value);
const height = parseFloat(heightInput.value);
if (!isNaN(width) &&
!isNaN(height)) {
const diagonal = Math.sqrt(
width ** 2 + height ** 2
).toFixed(2);
document.getElementById( "result1" )
.textContent = "Diagonal = " + diagonal;
const x = (
width / height
).toFixed(2);
document.getElementById(
"result2"
).textContent =
"Aspect Ratio (x:1 format) = " +
x +
" : 1" ;
const gcd = (a, b) => {
while (b) {
a %= b;
[a, b] = [b, a];
}
return a;
};
const gcdValue = gcd(
width,
height);
const w = width / gcdValue;
const h = height / gcdValue;
document.getElementById(
"result3"
).textContent =
"Aspect Ratio (w:h format) = " +
w +
" : " +
h;
// Apply aspect ratio to the preview image
const imageElement =
document.getElementById(
"previewImage"
);
imageElement.style.width = `${width}px`;
imageElement.style.height = `${height}px`;
}
else {
// Clear results and reset image on invalid input
document.getElementById(
"result1"
).textContent = "Diagonal: " ;
document.getElementById(
"result2"
).textContent =
"Aspect Ratio (x:1 format): " ;
document.getElementById(
"result3"
).textContent =
"Aspect Ratio (w:h format): " ;
const imageElement =
document.getElementById(
"previewImage"
);
imageElement.style.width =
"auto" ;
imageElement.style.height =
"auto" ;
}
} const setCommonRati = () => { const commonRatios = {
"16:9" : [1920, 1080],
"5:4" : [1280, 1024],
"4:3" : [1024, 768],
"3:2" : [1440, 960],
"8K" : [7680, 4320],
"5K" : [5120, 2880],
"4K" : [3840, 2160],
Retina: [2048, 1536],
iPhone6plus: [1920, 1080],
iPhone6: [1334, 750],
iPhone5: [1136, 640],
iPad: [1024, 768],
Twitter: [1024, 512],
WebBanner: [728, 90],
VGA: [640, 480],
HVGA: [320, 480],
};
const selectedRatio =
document.getElementById(
"commonRatios"
).value;
const [width, height] =
commonRatios[selectedRatio];
document.getElementById(
"width"
).value = width;
document.getElementById(
"height"
).value = height;
// Update the results and preview
// for the selected common ratio
calculateAspectRatio();
} // Initialize the image aspect ratio // based on the placeholder image calculateAspectRatio(); |
HTML
<!--Index.html--> <!DOCTYPE html> < html >
< head >
< title >
Aspect Ratio Calculator
with Live Image Preview
</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "container" >
< h1 >Aspect Ratio Calculator with
< span >Live Preview </ span >
</ h1 >
< label for = "width" >Width:</ label >
< input type = "number"
id = "width"
placeholder = "Enter width"
oninput = "calculateAspectRatio()" >
< br >
< label for = "height" >Height:</ label >
< input type = "number"
id = "height"
placeholder = "Enter height"
oninput = "calculateAspectRatio()" >
< br >
< label for = "commonRatios" >Select Common Ratio:</ label >
< select id = "commonRatios" onchange = "setCommonRatio()" >
< option value = "16:9" >
16:9 (1920x1080)
</ option >
< option value = "5:4" >
5:4 (1280x1024)
</ option >
< option value = "4:3" >
4:3 (1024x768)
</ option >
< option value = "3:2" >
3:2 (1440x960)
</ option >
< option value = "8K" >
8K (7680x4320)
</ option >
< option value = "5K" >
5K (5120x2880)
</ option >
< option value = "4K" >
4K (3840x2160)
</ option >
< option value = "Retina" >
IPad with Retina (2048x1536)
</ option >
< option value = "iPhone6plus" >
IPhone 6 Plus (1920x1080)
</ option >
< option value = "iPhone6" >
IPhone 6 (1334x750)
</ option >
< option value = "iPhone5" >
IPhone 5 (1136x640)
</ option >
< option value = "iPad" >
IPad (1024x768)
</ option >
< option value = "Twitter" >
Twitter (1024x512)
</ option >
< option value = "WebBanner" >
Common Web Banner (728x90)
</ option >
< option value = "VGA" >
VGA (640x480)
</ option >
< option value = "HVGA" >
HVGA (320x480)
</ option >
</ select >
< br >
< button onclick = "calculateAspect()" >Calculate</ button >
< p class = "result" id = "result1" >
Diagonal:
</ p >
< p class = "result" id = "result2" >
Aspect Ratio (x:1 format):
</ p >
< p class = "result" id = "result3" >
Aspect Ratio (w:h format):
</ p >
< div id = "imageContainer" >
< img id = "previewImage"
src =
alt = "Preview Image" >
</ div >
</ div >
< script src = "script.js" ></ script >
</ body >
</ html >
|
CSS
/*Style.css*/ body { font-family : Arial , sans-serif ;
background-color : #f5f5f5 ;
text-align : center ;
} .container { max-width : 700px ;
margin : 20px auto ;
background-color : #ffffff ;
padding : 40px ;
border-radius: 15px ;
box-shadow: 0 2px 14px 0px
rgba( 0 , 0 , 0 , 0.1 );
} h 1 {
font-size : 24px ;
margin-bottom : 20px ;
} span { color : #007bff ;
} label { display : block ;
font-weight : bold ;
margin-top : 10px ;
} input, select { width : 90% ;
padding : 10px ;
margin-top : 5px ;
border : 1px solid #ccc ;
border-radius: 5px ;
font-size : 16px ;
} select { height : 50px ;
} button { width : 20% ;
background-color : #007bff ;
color : #fff ;
padding : 10px ;
border : none ;
border-radius: 5px ;
font-size : 16px ;
margin-top : 20px ;
cursor : pointer ;
} button:hover { background-color : #0056b3 ;
} .result { font-weight : bold ;
margin-top : 20px ;
} .image-container { background-color : white ;
display : inline- block ;
max-width : 100% ;
margin-top : 20px ;
} img { max-width : 100% ;
height : auto ;
border-radius: 10px ;
box-shadow: 0 2px 24px 0px grey;
} |