Bilderrahmen-Größenrechner und Visualisierung
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Bilderrahmengrößen – Kostenloser Rechner & Visualisierer </title>
<meta name="description" content="Finden Sie die passende Größe für Bilderrahmen und Passepartout in Zoll oder Zentimetern. Nutzen Sie unseren kostenlosen Bilderrahmenrechner, um die genauen Proportionen zu sehen, und entdecken Sie anschließend gängige Rahmengrößen und Expertentipps.">
<style>
:root{
--brand:#4CAF50;
--text:#1f2937;
--muted:#6b7280;
--bg:#ffffff;
--accent:#f9fafb;
--table-stripe:#f6f7f9;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
h1{font-size:28px;margin:0 0 8px}
h2{font-size:22px;margin:24px 0 8px;color:var(--brand)}
h3{font-size:18px;margin:20px 0 8px}
p{margin:12px 0}
.lede{color:var(--muted)}
/* Calculator layout */
.tool{background:var(--accent);border:1px solid #e5e7eb;border-radius:10px;padding:18px;margin:18px 0}
.container{display:flex;gap:24px;flex-wrap:wrap}
.calculator,.frame-display{flex:1 1 420px}
input,select{width:100%;padding:10px;margin:5px 0;border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box}
button{padding:10px;width:100%;background-color:var(--brand);color:#fff;border:none;border-radius:6px;cursor:pointer}
button:hover{filter:brightness(0.95)}
.result{margin-top:12px}
.frame-display{text-align:center}
.annotation{fill:red;font-size:12px}
.dimension-line{stroke:red;stroke-width:0.5;marker-end:url(#arrow);marker-start:url(#arrow)}
/* Table */
.table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:10px;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{background:#eef7f0;color:#0f5132;text-align:left;padding:10px;border-bottom:1px solid #dbe7df}
tbody td{padding:10px;border-bottom:1px solid #eef2f7}
tbody tr:nth-child(odd){background:var(--table-stripe)}
.note{font-size:12px;color:var(--muted)}
.toc{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;margin:12px 0}
.toc a{color:var(--brand);text-decoration:none;border:1px solid #d1e7dd;border-radius:999px;padding:6px 10px;background:#eef7f0}
.toc a:hover{text-decoration:underline}
</style>
<div class="wrap">
<p class="lede"> Nutzen Sie das untenstehende Tool, um die richtige Größe für Bilderrahmen, Passepartout und Außenmaße zu berechnen. Anschließend können Sie in unseren Größentabellen und Tipps den perfekten Rahmen auswählen.</p>
<!-- TOOL: on top -->
<div class="tool" id="calculator-tool">
<p>Unser Bilderrahmenrechner hilft Ihnen, <span style="text-decoration: underline;"><strong>die perfekte Rahmengröße für Ihre Lieblingsfotos zu finden</strong></span> . Er berechnet außerdem die Passepartoutgröße sowie die Innen- und Außenmaße des Rahmens, damit Sie die idealen, individuellen Bilderrahmen gestalten können. Mit unserem Rechner finden Sie ganz einfach die optimale Rahmengröße für Ihre wertvolle Fotosammlung.</p>
<h2> Anleitung:</h2>
<p> Sobald Sie Ihre Werte eingegeben haben, werden Ihnen die Bilderrahmen digital in genauen Proportionen angezeigt, sodass Sie sich vorstellen können, wie sie Ihre Hochzeitsfotos oder das unvergessliche Familienurlaubsfoto, auf dem alle im richtigen Moment geblinzelt haben, ergänzen werden.</p>
<div class="container">
<div class="calculator">
<h2> Bilderrahmen-Größenrechner</h2>
<label for="unit">Einheit auswählen:</label>
<select id="unit" onchange="updatePlaceholders()">
<option value="inches"> Zoll</option>
<option value="centimeters"> Zentimeter</option>
</select>
<label for="artworkWidth">Breite des Kunstwerks:</label>
<input type="number" id="artworkWidth" placeholder="Enter artwork width" value="8">
<label for="artworkHeight">Höhe des Kunstwerks:</label>
<input type="number" id="artworkHeight" placeholder="Enter artwork height" value="10">
<label for="frameWidth">Rahmenbreite:</label>
<input type="number" id="frameWidth" placeholder="Enter frame width" value="2">
<label for="matWidth">Passepartoutbreite:</label>
<input type="number" id="matWidth" placeholder="Enter mat width" value="1">
<button onclick="calculateFrameSize()">Rahmengröße berechnen</button>
<div class="result" id="result"></div>
</div>
<div class="frame-display" id="frameDisplay"></div>
</div>
</div>
<!-- QUICK LINKS -->
<div class="toc">
<a href="#size-table">Gängige Größen</a>
<a href="#understanding">Rahmengrößen verstehen</a>
<a href="#ranges">Klein / Mittel / Groß</a>
<a href="#choosing">Wie man auswählt</a>
<a href="#matting">Passepartout- und Rahmengröße</a>
</div>
<!-- TABLE on top under tool -->
<h2 id="size-table"> Gängige Bilderrahmengrößen (Zoll & Zentimeter) </h2>
<div class="table-wrap">
<table aria-describedby="size-note">
<thead>
<tr>
<th> Druckgröße (in)</th>
<th> Druckgröße (cm)</th>
<th> Rahmen (ohne Passepartout)</th>
<th> Rahmen (mit Passepartout)</th>
<th> Typische Anwendungsgebiete</th>
</tr>
</thead>
<tbody>
<tr>
<td> 4 × 6</td>
<td> 10 × 15</td>
<td> 4 × 6</td>
<td> 5 × 7 oder 8 × 10</td>
<td> Schnappschüsse, Fotos vom Schreibtisch</td>
</tr>
<tr>
<td> 5 × 7</td>
<td> 13 × 18</td>
<td> 5 × 7</td>
<td> 8 × 10 oder 11 × 14</td>
<td> Porträts, gerahmte Geschenke</td>
</tr>
<tr>
<td> 8 × 10</td>
<td> 20 × 25</td>
<td> 8 × 10</td>
<td> 11 × 14 oder 16 × 20</td>
<td> Familienfotos, Kunstdrucke</td>
</tr>
<tr>
<td> 8,3 × 11,7 (A4)</td>
<td> 21 × 29,7</td>
<td> A4</td>
<td> 11 × 14 oder 16 × 20</td>
<td>Zertifikate, Dokumente</td>
</tr>
<tr>
<td> 11 × 14</td>
<td> 28 × 35</td>
<td> 11 × 14</td>
<td> 16 × 20</td>
<td> Große Porträts, Diplome</td>
</tr>
<tr>
<td> 12 × 16</td>
<td> 30 × 40</td>
<td> 12 × 16</td>
<td> 16 × 20 oder 18 × 24</td>
<td> Mittelgroßes Wandbild</td>
</tr>
<tr>
<td> 16 × 20</td>
<td> 40 × 50</td>
<td> 16 × 20</td>
<td> 20 × 24 oder 20 × 26</td>
<td> Große Porträts, Wanddisplays</td>
</tr>
<tr>
<td> 18 × 24</td>
<td> 46 × 61</td>
<td> 18 × 24</td>
<td> 24 × 30</td>
<td> Poster, Kunstdrucke</td>
</tr>
<tr>
<td> 20 × 30</td>
<td> 50 × 76</td>
<td> 20 × 30</td>
<td> 24 × 36</td>
<td> Poster, Panoramafotos</td>
</tr>
<tr>
<td> 24 × 36</td>
<td> 61 × 91</td>
<td> 24 × 36</td>
<td> 30 × 40</td>
<td> Filmplakate, Statement-Kunst </td>
</tr>
</tbody>
</table>
</div>
<p id="size-note" class="note"> Hinweis: Die cm-Werte sind zur besseren Lesbarkeit gerundet. Falls Ihr Druck ein Sonderformat hat, verwenden Sie bitte den obigen Rechner, um genaue Rahmen-/Passepartout-Empfehlungen zu erhalten.</p>
<!-- CONTENT SECTIONS -->
<h2 id="understanding"> Rahmengrößen verstehen</h2>
<p> Rahmengrößen werden nach der Größe des Fotos oder des Glases angegeben, nicht nach dem Außenmaß des Rahmens. Beispielsweise passt ein „8×10-Rahmen“ für ein Foto im Format 8×10 Zoll (der Außenrahmen ist je nach Ausführung größer). Die gängigsten Größen für kleine bis mittelgroße Fotos sind 4×6, 5×7 und 8×10, während größere Formate wie 16×20 und 24×36 für eindrucksvolle Wandbilder verwendet werden.</p>
<h2 id="ranges">Kleine, mittlere, große und extra-große Rahmen</h2>
<h3> Klein (4×6, 5×7)</h3>
<p> Ideal für Schreibtische, Regale und kleine Wandflächen. Perfekt für Porträts, Reisefotos und kleine Geschenke.</p>
<h3> Mittel (8×10, 11×14, 12×16)</h3>
<p> Ideal für Familienporträts, Hochzeitsfotos und Urkunden. Geeignet für Tische und Wände.</p>
<h3> Groß (16×20, 18×24, 20×30)</h3>
<p> Ideal für großformatige Porträts, Kunstdrucke und professionelle Fotografie. Zur Wandmontage geeignet.</p>
<h3> Extra-groß (24×36, 30×40)</h3>
<p> Für Poster, Panoramadrucke und großformatige Kunstwerke. Immer an der Wand montiert und ein starker Blickfang.</p>
<h2 id="choosing"> Wie man die richtige Rahmengröße auswählt</h2>
<ul>
<li>
<strong>Fotoauflösung:</strong> Größere Ausdrucke erfordern eine höhere Auflösung für scharfe Ergebnisse.</li>
<li>
<strong>Ausstellungsfläche:</strong> Passen Sie die Rahmengröße an Ihre Wand- oder Regalfläche an.</li>
<li>
<strong>Passepartout:</strong> Passepartouts werten die Präsentation auf, erfordern aber die nächstgrößere Rahmengröße.</li>
<li>
<strong>Anzahl der abgebildeten Personen:</strong> Gruppenfotos sehen in größerer Größe in der Regel besser aus.</li>
<li>
<strong>Stil:</strong> Schmale Fassungen sorgen für einen minimalistischen Look; dickere Fassungen verleihen mehr Präsenz.</li>
</ul>
<h2 id="matting"> Passepartout- und Rahmengröße</h2>
<p> Kein Passepartout? Rahmengröße an Druckgröße anpassen. Passepartout verwenden? Rahmengröße größer wählen. Gängige Kombinationen:</p>
<ul>
<li> 5×7 Foto → 8×10 Rahmen (mit Passepartout)</li>
<li> 8×10 Foto → 11×14 Rahmen (mit Passepartout)</li>
<li> 11×14 Foto → 16×20 Rahmen (mit Passepartout)</li>
<li> 16×20 Foto → 20×24 Rahmen (mit Passepartout)</li>
</ul>
<p> Für individuelle Passepartoutbreiten oder Sonderdrucke verwenden Sie den Rechner oben, um genaue Außenmaße und eine skalierte Vorschau zu erhalten.</p>
</div>
<script>
function updatePlaceholders() {
const unit = document.getElementById('unit').value;
const placeholders = {
inches: {
artworkWidth: 'Enter artwork width in inches',
artworkHeight: 'Enter artwork height in inches',
frameWidth: 'Enter frame width in inches',
matWidth: 'Enter mat width in inches'
},
centimeters: {
artworkWidth: 'Enter artwork width in centimeters',
artworkHeight: 'Enter artwork height in centimeters',
frameWidth: 'Enter frame width in centimeters',
matWidth: 'Enter mat width in centimeters'
}
};
document.getElementById('artworkWidth').placeholder = placeholders[unit].artworkWidth;
document.getElementById('artworkHeight').placeholder = placeholders[unit].artworkHeight;
document.getElementById('frameWidth').placeholder = placeholders[unit].frameWidth;
document.getElementById('matWidth').placeholder = placeholders[unit].matWidth;
}
function convertToInches(value, unit) {
return unit === 'centimeters' ? value / 2.54 : value;
}
function convertToDisplay(value, unit) {
return unit === 'centimeters' ? value * 2.54 : value;
}
function calculateFrameSize() {
const unit = document.getElementById('unit').value;
const artworkWidth = convertToInches(parseFloat(document.getElementById('artworkWidth').value), unit);
const artworkHeight = convertToInches(parseFloat(document.getElementById('artworkHeight').value), unit);
const frameWidth = convertToInches(parseFloat(document.getElementById('frameWidth').value), unit);
const matWidth = convertToInches(parseFloat(document.getElementById('matWidth').value), unit);
if (isNaN(artworkWidth) || isNaN(artworkHeight) || isNaN(frameWidth) || isNaN(matWidth)) {
document.getElementById('result').innerHTML = "Please enter valid numbers.";
return;
}
const totalWidth = artworkWidth + 2 * (frameWidth + matWidth);
const totalHeight = artworkHeight + 2 * (frameWidth + matWidth);
document.getElementById('result').innerHTML = `
<h3>Frame Outer Dimensions:</h3>
<p>Width: ${convertToDisplay(totalWidth, unit).toFixed(2)} ${unit}</p>
<p>Height: ${convertToDisplay(totalHeight, unit).toFixed(2)} ${unit}</p>
`;
displayFrame(artworkWidth, artworkHeight, frameWidth, matWidth);
}
function displayFrame(artworkWidth, artworkHeight, frameWidth, matWidth) {
const svgMaxWidth = 500;
const svgMaxHeight = 500;
const totalFrameWidth = artworkWidth + 2 * (frameWidth + matWidth);
const totalFrameHeight = artworkHeight + 2 * (frameWidth + matWidth);
const horizontalScale = svgMaxWidth / totalFrameWidth;
const verticalScale = svgMaxHeight / totalFrameHeight;
const scale = Math.min(horizontalScale, verticalScale);
const svgWidth = totalFrameWidth * scale;
const svgHeight = totalFrameHeight * scale;
const artworkScaledWidth = artworkWidth * scale;
const artworkScaledHeight = artworkHeight * scale;
const matScaledWidth = matWidth * scale;
const frameScaledWidth = frameWidth * scale;
document.getElementById('frameDisplay').innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="${svgWidth}" height="${svgHeight + 100}" viewBox="0 0 ${svgWidth} ${svgHeight + 100}" style="overflow: visible;">
<defs>
<linearGradient id="aware" x1="0%" y1="0%" x2="100%">
<stop offset="0%" style="stop-color:#ffffb3;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#fccde5;stop-opacity:1"></stop>
</linearGradient>
<marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L6,3 z" fill="red"/>
</marker>
<clipPath id="clipPath">
<rect x="0" y="0" width="${svgWidth}" height="${svgHeight}"></rect>
</clipPath>
</defs>
<!-- Frame -->
<rect x="0" y="0" width="${svgWidth}" height="${svgHeight}" style="fill:black; opacity:0.65; clip-path: url(#clipPath);"></rect>
<!-- Mat -->
<rect x="${frameScaledWidth}" y="${frameScaledWidth}" width="${artworkScaledWidth + 2 * matScaledWidth}" height="${artworkScaledHeight + 2 * matScaledWidth}" style="fill:white; stroke-width:0;"></rect>
<!-- Artwork -->
<rect x="${frameScaledWidth + matScaledWidth}" y="${frameScaledWidth + matScaledWidth}" width="${artworkScaledWidth}" height="${artworkScaledHeight}" style="fill:url(#aware); stroke-width:0;"></rect>
<!-- Outer Frame Width -->
<line x1="0" y1="${svgHeight + 10}" x2="${svgWidth}" y2="${svgHeight + 10}" class="dimension-line"/>
<text x="${svgWidth / 2}" y="${svgHeight + 25}" text-anchor="middle" class="annotation">Outer Frame Width: ${convertToDisplay(totalFrameWidth, document.getElementById('unit').value).toFixed(2)} ${document.getElementById('unit').value}</text>
<!-- Inner Frame Width -->
<line x1="${frameScaledWidth}" y1="${svgHeight + 35}" x2="${svgWidth - frameScaledWidth}" y2="${svgHeight + 35}" class="dimension-line"/>
<text x="${svgWidth / 2}" y="${svgHeight + 50}" text-anchor="middle" class="annotation">Inner Frame Width: ${convertToDisplay(artworkWidth + 2 * matWidth, document.getElementById('unit').value).toFixed(2)} ${document.getElementById('unit').value}</text>
<!-- Artwork Width -->
<line x1="${frameScaledWidth + matScaledWidth}" y1="${svgHeight + 60}" x2="${svgWidth - frameScaledWidth - matScaledWidth}" y2="${svgHeight + 60}" class="dimension-line"/>
<text x="${svgWidth / 2}" y="${svgHeight + 75}" text-anchor="middle" class="annotation">Artwork Width: ${convertToDisplay(artworkWidth, document.getElementById('unit').value).toFixed(2)} ${document.getElementById('unit').value}</text>
</svg>
`;
}
window.onload = () => {
updatePlaceholders();
calculateFrameSize();
};
</script>
<h1> Suchen Sie nach einzigartigen gerahmten Kunstwerken für Ihre Wohnungsdekoration?</h1>
<p>
<br data-start="1001" data-end="1004"> Entdecken Sie <a href="https://driedpetalsgallery.com/collections/wall-art-pressed-flowers-frames" title="Kunst aus gepressten Blumen"><strong data-start="1016" data-end="1078">gerahmte Kunstwerke mit gepressten Blütenblättern</strong></a> , die sorgfältig arrangiert wurden, um ihren zarten Charme und ihre symbolische Schönheit für immer zu bewahren. </p>
<p><img src="https://cdn.shopify.com/s/files/1/0858/4328/0160/files/20250803-125421.jpg?v=1754251154" alt="" width="414" height="414" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p></p>