総画素数から4:3または16:9のピクセル数を計算します。今は1億2千万画素のデジタルカメラも出ていて驚きですが、その画素数がデジタルカメラの4:3または16:9の比率の時のピクセル異数が気になったアノで作って見ました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アスペクト比別ピクセル計算</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
background: black;
color: white;
}
input {
width: 200px;
padding: 5px;
}
</style>
</head>
<body>
<h3>総画素数から4:3または16:9のピクセル数を計算</h3>
<p>総画素数を入力（例：2073600 は 1920×1080）：</p>
<span>
<input type="number" id="totalPixels" value="2073600">
 
<button onclick="calculateResolutions()">計算</button>
</span>
<h3>結果</h3>
<div id="results"></div>
<script>
function calculateResolutions() {
const total =
parseInt(document.getElementById("totalPixels").value);
const output = document.getElementById("results");
if (isNaN(total) || total <= 0) {
output.innerHTML = "有効な正の数を入力してください。";
return;
}
function calcPixels(ratioW, ratioH) {
const aspect = ratioW / ratioH;
const height = Math.sqrt(total / aspect);
const width = aspect * height;
return {
w: Math.round(width),
h: Math.round(height)
};
}
const res4_3 = calcPixels(4, 3);
const res16_9 = calcPixels(16, 9);
output.innerHTML = `
<strong>アスペクト比 4:3</strong><br>
幅: ${res4_3.w} px, 高さ: ${res4_3.h} px<br><br>
<strong>アスペクト比 16:9</strong><br>
幅: ${res16_9.w} px, 高さ: ${res16_9.h} px
`;
}
</script>
</body>
</html>
実行直後の画面。
デフォルト設定の画素数を珪砂した結果。
1億2千万画素を珪砂した結果。
