Calculateur et visualiseur de la taille des cadres photo
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Tailles de cadres photo – Calculateur et visualiseur gratuits </title>
<meta name="description" content="Trouvez le cadre et le passe-partout parfaits, en pouces ou en centimètres. Utilisez notre calculateur de dimensions gratuit pour visualiser les proportions exactes, puis consultez les tailles de cadres courantes et nos conseils d'experts.">
<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"> Utilisez l'outil ci-dessous pour calculer la taille idéale du cadre, du passe-partout et des dimensions extérieures. Consultez ensuite nos tableaux de tailles et nos conseils pour choisir le cadre parfait.</p>
<!-- TOOL: on top -->
<div class="tool" id="calculator-tool">
<p>Notre calculateur de cadres est conçu pour vous aider <span style="text-decoration: underline;"><strong>à trouver la taille de cadre idéale</strong></span> pour vos photos préférées. Il calcule également la taille du passe-partout ainsi que les dimensions intérieures et extérieures du cadre, vous permettant ainsi de créer des cadres sur mesure parfaits. Grâce à notre calculateur, vous pouvez facilement déterminer les dimensions de cadre les plus adaptées à votre précieuse collection de photos.</p>
<h2> Mode d'emploi :</h2>
<p> Une fois vos valeurs saisies, vous pourrez voir les cadres photo représentés numériquement dans des proportions précises, ce qui vous permettra de visualiser comment ils mettront en valeur vos photos de mariage ou cette photo de vacances en famille inoubliable où tout le monde a cligné des yeux au bon moment.</p>
<div class="container">
<div class="calculator">
<h2> Calculateur de taille de cadre photo</h2>
<label for="unit">Sélectionner l'unité :</label>
<select id="unit" onchange="updatePlaceholders()">
<option value="inches"> Pouces</option>
<option value="centimeters"> Centimètres</option>
</select>
<label for="artworkWidth">Largeur de l'œuvre :</label>
<input type="number" id="artworkWidth" placeholder="Enter artwork width" value="8">
<label for="artworkHeight">Hauteur de l'œuvre :</label>
<input type="number" id="artworkHeight" placeholder="Enter artwork height" value="10">
<label for="frameWidth">Largeur du cadre :</label>
<input type="number" id="frameWidth" placeholder="Enter frame width" value="2">
<label for="matWidth">Largeur du tapis :</label>
<input type="number" id="matWidth" placeholder="Enter mat width" value="1">
<button onclick="calculateFrameSize()">Calculer la taille du cadre</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">Tailles courantes</a>
<a href="#understanding">Comprendre les tailles de cadre</a>
<a href="#ranges">Petit / Moyen / Grand</a>
<a href="#choosing">Comment choisir</a>
<a href="#matting">Dimensions du passe-partout et du cadre</a>
</div>
<!-- TABLE on top under tool -->
<h2 id="size-table"> Tailles courantes des cadres photo (pouces et centimètres) </h2>
<div class="table-wrap">
<table aria-describedby="size-note">
<thead>
<tr>
<th> Taille d'impression (en pouces)</th>
<th> Taille de l'impression (cm)</th>
<th> Cadre (sans passe-partout)</th>
<th> Cadre (avec passe-partout)</th>
<th> Utilisations typiques</th>
</tr>
</thead>
<tbody>
<tr>
<td> 4 × 6</td>
<td> 10 × 15</td>
<td> 4 × 6</td>
<td> 5 × 7 ou 8 × 10</td>
<td> Instantanés, photos de bureau</td>
</tr>
<tr>
<td> 5 × 7</td>
<td> 13 × 18</td>
<td> 5 × 7</td>
<td> 8 × 10 ou 11 × 14</td>
<td> Portraits, cadeaux encadrés</td>
</tr>
<tr>
<td> 8 × 10</td>
<td> 20 × 25</td>
<td> 8 × 10</td>
<td> 11 × 14 ou 16 × 20</td>
<td> Photos de famille, reproductions d'art</td>
</tr>
<tr>
<td> 8,3 × 11,7 (A4)</td>
<td> 21 × 29,7</td>
<td> A4</td>
<td> 11 × 14 ou 16 × 20</td>
<td>Certificats, documents</td>
</tr>
<tr>
<td> 11 × 14</td>
<td> 28 × 35</td>
<td> 11 × 14</td>
<td> 16 × 20</td>
<td> Grands portraits, diplômes</td>
</tr>
<tr>
<td> 12 × 16</td>
<td> 30 × 40</td>
<td> 12 × 16</td>
<td> 16 × 20 ou 18 × 24</td>
<td> Art mural de taille moyenne</td>
</tr>
<tr>
<td> 16 × 20</td>
<td> 40 × 50</td>
<td> 16 × 20</td>
<td> 20 × 24 ou 20 × 26</td>
<td> Grands portraits, présentoirs muraux</td>
</tr>
<tr>
<td> 18 × 24</td>
<td> 46 × 61</td>
<td> 18 × 24</td>
<td> 24 × 30</td>
<td> Affiches, reproductions d'art</td>
</tr>
<tr>
<td> 20 × 30</td>
<td> 50 × 76</td>
<td> 20 × 30</td>
<td> 24 × 36</td>
<td> Affiches, photos panoramiques</td>
</tr>
<tr>
<td> 24 × 36</td>
<td> 61 × 91</td>
<td> 24 × 36</td>
<td> 30 × 40</td>
<td> Affiches de films, art engagé </td>
</tr>
</tbody>
</table>
</div>
<p id="size-note" class="note"> Remarque : les valeurs en cm sont arrondies pour plus de clarté. Si votre tirage a un format non standard, utilisez le calculateur ci-dessus pour obtenir des suggestions précises concernant l’encadrement et le passe-partout.</p>
<!-- CONTENT SECTIONS -->
<h2 id="understanding"> Comprendre les tailles de cadre</h2>
<p> Les dimensions des cadres sont indiquées par la taille de l'impression ou du verre qu'ils contiennent, et non par celle du cadre extérieur. Par exemple, un cadre « 8×10 » convient à une photo de 8×10 pouces (la taille du cadre extérieur varie selon le style). Les formats les plus courants sont 4×6, 5×7 et 8×10 pour les photos de petite et moyenne taille, tandis que les formats plus grands comme 16×20 et 24×36 sont utilisés pour les décorations murales imposantes.</p>
<h2 id="ranges">Cadres de petite, moyenne, grande et très grande taille</h2>
<h3> Petit (4×6, 5×7)</h3>
<p> Idéal pour les bureaux, les étagères et les petits espaces muraux. Parfait pour les portraits, les photos de voyage et les petits cadeaux.</p>
<h3> Moyen (8×10, 11×14, 12×16)</h3>
<p> Idéal pour les portraits de famille, les photos de mariage et les certificats. Convient pour une utilisation sur table ou au mur.</p>
<h3> Grand format (16×20, 18×24, 20×30)</h3>
<p> Idéal pour les grands portraits, les tirages d'art et la photographie professionnelle. Conçu pour une exposition murale.</p>
<h3> Très grand (24×36, 30×40)</h3>
<p> Pour les affiches, les impressions panoramiques et les œuvres d'art grand format. Toujours fixées au mur et constituant un point focal fort.</p>
<h2 id="choosing"> Comment choisir la bonne taille de cadre</h2>
<ul>
<li>
<strong>Résolution photo :</strong> Les tirages de grand format nécessitent une résolution plus élevée pour obtenir des résultats nets.</li>
<li>
<strong>Espace d'exposition :</strong> Adaptez la taille du cadre à l'espace disponible sur votre mur ou votre étagère.</li>
<li>
<strong>Encadrement :</strong> Les passe-partout rehaussent la présentation, mais nécessitent un cadre de taille supérieure.</li>
<li>
<strong>Nombre de sujets :</strong> Les photos de groupe sont généralement plus belles en grand nombre.</li>
<li>
<strong>Style :</strong> Les montures fines privilégient la simplicité ; les montures plus épaisses ajoutent de la présence.</li>
</ul>
<h2 id="matting"> Dimensions du passe-partout et du cadre</h2>
<p> Pas de passe-partout ? Choisissez un cadre adapté à la taille de l’impression. Vous utilisez un passe-partout ? Optez pour un cadre plus grand. Associations courantes :</p>
<ul>
<li> Photo 5×7 → Cadre 8×10 (avec passe-partout)</li>
<li> Photo 8×10 → Cadre 11×14 (avec passe-partout)</li>
<li> Photo 11×14 → Cadre 16×20 (avec passe-partout)</li>
<li> Photo 16×20 → Cadre 20×24 (avec passe-partout)</li>
</ul>
<p> Pour les largeurs de passe-partout personnalisées ou les impressions non standard, utilisez le calculateur en haut de la page pour obtenir des dimensions extérieures précises et un aperçu à l'échelle.</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> Vous recherchez des œuvres d'art encadrées uniques pour décorer votre intérieur ?</h1>
<p>
<br data-start="1001" data-end="1004"> Découvrez <a href="https://driedpetalsgallery.com/collections/wall-art-pressed-flowers-frames" title="art des fleurs pressées"><strong data-start="1016" data-end="1078">des cadres artistiques ornés de véritables pétales de fleurs pressées</strong></a> , soigneusement agencés pour préserver à jamais leur charme délicat et leur beauté symbolique. </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>