1import{_ as oe}from"./DPIaFIMc.js";import{_ as re}from"./wMZVWWcJ.js";import{_ as se}from"./VctD_Bvt.js";import{_ as ne}from"./CdnNuUX_.js";import{_ as le}from"./8fY8EC0V.js";import{_ as ce}from"./CXwnfpox.js";import{_ as de}from"./CYwGAoYU.js";import{_ as ue}from"./CnzqtAtd.js";import{d as pe,s as me,A as be,b as _e,C as j,w as F,y as e,o as b,f as i,t as n,J as g,R as v,g as u,j as f,e as _,F as M,r as U,D as he,x as I,k as y,U as ge,c as h,m as fe,E as xe}from"./CkpM57L6.js";import{u as ve}from"./DBNm6Tpz.js";import{u as we}from"./BgwjXCoU.js";import"./B0zWc29K.js";import"./DXrLEPCz.js";import"./DlAUqK2U.js";const qe={class:"grid lg:grid-cols-2 gap-8 mb-4"},ze={class:"space-y-5"},ye={class:"form-control"},Ce={class:"label pb-1"},Se={class:"label-text font-bold text-base-content/80"},ke={class:"flex items-center gap-2"},Pe=["aria-label"],Le=["aria-label"],Ie=["aria-label"],Ae={class:"grid grid-cols-2 gap-3"},Te={class:"form-control"},Re={class:"label pb-1",for:"w-input"},Ge={class:"label-text font-bold text-base-content/80"},He={class:"input input-bordered flex items-center gap-2"},We={class:"form-control"},je={class:"label pb-1",for:"h-input"},Fe={class:"label-text font-bold text-base-content/80"},Me={class:"input input-bordered flex items-center gap-2"},Ue={class:"space-y-3"},Ve={class:"text-xs font-bold uppercase tracking-wide text-base-content/75 mb-2"},Ee={class:"flex flex-wrap gap-2"},De=["onClick"],Ne={class:"space-y-4"},Be={class:"bg-base-200/50 border border-primary/10 rounded-2xl p-6 flex flex-col items-center justify-center min-h-[260px]"},Oe={class:"flex items-center justify-center",style:{height:"200px"}},$e={class:"text-xs font-semibold text-primary px-1 text-center"},Qe={class:"mt-4 text-center text-sm text-base-content/70"},Ye={key:0},Ke={class:"text-base-content"},Xe={class:"grid grid-cols-3 gap-3"},Je={class:"bg-base-200/50 rounded-xl p-3 text-center"},Ze={class:"text-xs text-base-content/60"},et={class:"text-lg font-bold"},tt={class:"bg-base-200/50 rounded-xl p-3 text-center"},at={class:"text-xs text-base-content/60"},it={class:"text-lg font-bold"},ot={class:"bg-base-200/50 rounded-xl p-3 text-center"},rt={class:"text-xs text-base-content/60"},st={class:"text-lg font-bold"},nt={class:"bg-base-200/50 border border-primary/10 rounded-2xl p-4 space-y-3"},lt={class:"text-sm font-bold text-base-content/80 flex items-center gap-2"},ct={class:"bg-base-200/50 border border-primary/10 rounded-2xl p-4 space-y-3"},dt={class:"text-sm font-bold text-base-content/80 flex items-center gap-2"},ut={class:"text-xs text-base-content/60"},pt={class:"flex flex-wrap gap-2"},mt=["disabled"],bt=["disabled"],_t={class:"bg-base-200/50 border border-primary/10 rounded-2xl p-5 mb-4"},ht={class:"flex items-center gap-3 cursor-pointer"},gt={class:"font-medium"},ft={key:0,class:"mt-5 grid md:grid-cols-2 gap-6 items-center"},xt={class:"space-y-3"},vt={class:"text-sm text-base-content/70"},wt={class:"grid grid-cols-2 gap-3"},qt={class:"form-control"},zt={class:"label pb-1"},yt={class:"label-text text-sm"},Ct={class:"form-control"},St={class:"label pb-1"},kt={class:"label-text text-sm"},Pt={key:0,class:"text-sm"},Lt={key:0,class:"text-warning font-semibold"},It={key:1,class:"text-warning font-semibold"},At={key:2,class:"text-success font-semibold"},Tt={key:0,class:"flex items-center justify-center"},Rt={class:"space-y-8"},Gt={class:"text-2xl font-bold mb-3 flex items-center gap-2"},Ht={class:"text-base-content/80 leading-relaxed"},Wt=pe({__name:"aspect-ratio-calculator",setup(A){const{t}=me({useScope:"local"}),E=[{label:"16:9",w:16,h:9,group:"common"},{label:"4:3",w:4,h:3,group:"common"},{label:"1:1",w:1,h:1,group:"common"},{label:"3:2",w:3,h:2,group:"common"},{label:"21:9",w:21,h:9,group:"common"},{label:"5:4",w:5,h:4,group:"common"},{label:"Story / Reels (9:16)",w:9,h:16,group:"social"},{label:"TikTok (9:16)",w:9,h:16,group:"social"},{label:"Feed Instagram (4:5)",w:4,h:5,group:"social"},{label:"Feed quadrado (1:1)",w:1,h:1,group:"social"},{label:"YouTube / Thumb (16:9)",w:16,h:9,group:"social"},{label:"YouTube Shorts (9:16)",w:9,h:16,group:"social"},{label:"Capa Facebook (205:78)",w:205,h:78,group:"social"},{label:"X / Twitter (16:9)",w:16,h:9,group:"social"},{label:"A4 retrato (210:297)",w:210,h:297,group:"print"},{label:"A4 paisagem (297:210)",w:297,h:210,group:"print"},{label:"Foto 10Ã15 (3:2)",w:3,h:2,group:"print"},{label:"Carta (17:22)",w:17,h:22,group:"print"},{label:"Widescreen (1.85:1)",w:37,h:20,group:"cinema"},{label:"Anamórfico (2.39:1)",w:239,h:100,group:"cinema"},{label:"Acadêmico (1.37:1)",w:137,h:100,group:"cinema"},{label:"IMAX (1.43:1)",w:143,h:100,group:"cinema"}],D=h(()=>({common:t("group_common"),social:t("group_social"),cinema:t("group_cinema"),print:t("group_print")})),a=fe({ratioW:16,ratioH:9,width:1920,height:1080,lock:"width",activePreset:"16:9",showFit:!1,containerW:1920,containerH:1080,ads:!1}),N=ve(a);function B(r,o){for(r=Math.abs(Math.round(r)),o=Math.abs(Math.round(o));o;)[r,o]=[o,r%o];return r||1}function T(r,o){const s=B(r,o);return{w:Math.round(r)/s,h:Math.round(o)/s}}const O=h(()=>a.ratioW/a.ratioH),L=h(()=>!a.width||!a.height?null:T(a.width,a.height));function C(r){const o=O.value;!isFinite(o)||o<=0||(r==="width"&&a.width>0?a.height=Math.round(a.width/o):r==="height"&&a.height>0&&(a.width=Math.round(a.height*o)))}function $(r){a.ratioW=r.w,a.ratioH=r.h,a.activePreset=r.label,C(a.lock)}function R(){a.activePreset="",C(a.lock)}function Q(){a.lock="width",C("width")}function Y(){a.lock="height",C("height")}function K(){[a.ratioW,a.ratioH]=[a.ratioH,a.ratioW],[a.width,a.height]=[a.height,a.width],a.activePreset=""}function X(){if(!a.width||!a.height)return;const r=T(a.width,a.height);a.ratioW=r.w,a.ratioH=r.h,a.activePreset=""}const w=xe(!1);function G(r=!0){const s=a.ratioW/a.ratioH;let l,c;s>=1?(l=2048,c=Math.round(2048/s)):(c=2048,l=Math.round(2048*s));const p=document.createElement("canvas");p.width=l,p.height=c;const m=p.getContext("2d");if(m){r||(m.fillStyle="#ffffff",m.fillRect(0,0,l,c)),w.value=!0;try{p.toBlob(S=>{if(w.value=!1,!S)return;const k=URL.createObjectURL(S),z=document.createElement("a");
1z.href=k,z.download=`aspect-ratio-${a.ratioW}x${a.ratioH}.png`,z.click(),setTimeout(()=>URL.revokeObjectURL(k),1e3)},"image/png")}catch{w.value=!1}}}const J=h(()=>{const r=a.width*a.height/1e6;return r>=.01?r.toFixed(2):"< 0.01"}),H=h(()=>{const s=a.width/a.height;if(!isFinite(s)||s<=0)return{w:280,h:200};let l,c;return s>280/200?(l=280,c=Math.round(280/s)):(c=200,l=Math.round(200*s)),{w:Math.max(l,24),h:Math.max(c,16)}}),x=h(()=>{const r=a.containerW/a.containerH,o=a.ratioW/a.ratioH;if(!isFinite(r)||!isFinite(o)||r<=0||o<=0)return null;let s,l;o>r?(s=a.containerW,l=Math.round(a.containerW/o)):(l=a.containerH,s=Math.round(a.containerH*o));const c=Math.round((a.containerW-s)/2),p=Math.round((a.containerH-l)/2);let m;return p>0?m="letterbox":c>0?m="pillarbox":m="perfect",{drawW:s,drawH:l,barX:c,barY:p,type:m}}),q=h(()=>{const r=x.value;if(!r)return null;const o=280,s=200,l=a.containerW/a.containerH;let c,p;l>o/s?(c=o,p=Math.round(o/l)):(p=s,c=Math.round(s*l));const m=c/a.containerW;return{cw:c,ch:p,iw:Math.max(Math.round(r.drawW*m),4),ih:Math.max(Math.round(r.drawH*m),4)}}),Z=h(()=>`aspect-ratio: ${a.ratioW} / ${a.ratioH};`),ee=h(()=>`<img src="..." width="${a.width}" height="${a.height}" alt="">`),te=h(()=>{const r=a.ratioH/a.ratioW;return!isFinite(r)||r<=0?"":`.embed { 2 position: relative; 3 width: 100%; 4 padding-bottom: ${(r*100).toFixed(4).replace(/\.?0+$/,"")}%; 5} 6.embed > iframe { 7 position: absolute; 8 inset: 0; 9 width: 100%; 10 height: 100%; 11}`});function ae(){N()}be(()=>[a.width,a.height,a.ratioW,a.ratioH],()=>ae()),we({name:t("title"),description:t("meta"),features:[t("f_1"),t("f_2"),t("f_3"),t("f_4"),t("f_5")],faq:[{question:t("faq_1_q"),answer:t("faq_1_a")},{question:t("faq_2_q"),answer:t("faq_2_a")},{question:t("faq_3_q"),answer:t("faq_3_a")},{question:t("faq_4_q"),answer:t("faq_4_a")},{question:t("faq_5_q"),answer:t("faq_5_a")}]}),_e({title:t("pageTitle"),meta:[{name:"description",content:t("meta")}]});const ie=h(()=>{const r={};for(const o of E){let s=r[o.group];s||(s=[],r[o.group]=s),s.push(o)}return r});return(r,o)=>{const s=oe,l=re,c=se,p=ne,m=le,S=ce,k=de,z=ue;return b(),j(z,{title:e(t)("title"),description:e(t)("meta"),"wiki-url":"https://pt.wikipedia.org/wiki/Propor%C3%A7%C3%A3o_de_tela","wiki-label":e(t)("wiki_label"),breadcrumb:{label:e(t)("bc"),to:"various-tools"},"see-also-links":[{label:e(t)("see1"),to:"resize-image"},{label:e(t)("see2"),to:"crop-image"},{label:e(t)("see3"),to:"simple-rule-of-three-calculator"},{label:e(t)("see4"),to:"percentage-calculator"}]},{info:F(()=>[i("div",Rt,[i("section",null,[i("p",null,n(e(t)("d1")),1)]),u(p,{title:e(t)("features_title"),items:[e(t)("f_1"),e(t)("f_2"),e(t)("f_3"),e(t)("f_4"),e(t)("f_5")]},null,8,["title","items"]),i("section",null,[i("h2",Gt,[u(s,{name:"heroicons:calculator-20-solid",class:"w-6 h-6 text-primary"}),f(" "+n(e(t)("how_title")),1)]),i("p",Ht,n(e(t)("how_desc")),1)]),u(m,{title:e(t)("use_cases_title"),description:e(t)("use_cases_intro"),items:[{title:e(t)("use_1_t"),description:e(t)("use_1_d")},{title:e(t)("use_2_t"),description:e(t)("use_2_d")},{title:e(t)("use_3_t"),description:e(t)("use_3_d")},{title:e(t)("use_4_t"),description:e(t)("use_4_d")},{title:e(t)("use_5_t"),description:e(t)("use_5_d")},{title:e(t)("use_6_t"),description:e(t)("use_6_d")}]},null,8,["title","description","items"]),u(S,{title:e(t)("how_to_use_title"),items:[{title:e(t)("step_1_title"),description:e(t)("step_1_desc")},{title:e(t)("step_2_title"),description:e(t)("step_2_desc")},{title:e(t)("step_3_title"),description:e(t)("step_3_desc")},{title:e(t)("step_4_title"),description:e(t)("step_4_desc")}]},null,8,["title","items"]),u(k,{title:e(t)("faq_title"),items:[{question:e(t)("faq_1_q"),answer:e(t)("faq_1_a")},{question:e(t)("faq_2_q"),answer:e(t)("faq_2_a")},{question:e(t)("faq_3_q"),answer:e(t)("faq_3_a")},{question:e(t)("faq_4_q"),answer:e(t)("faq_4_a")},{question:e(t)("faq_5_q"),answer:e(t)("faq_5_a")}]},null,8,["title","items"])])]),default:F(()=>[i("div",qe,[i("div",ze,[i("div",ye,[i("label",Ce,[i("span",Se,n(e(t)("ratio_label")),1)]),i("div",ke,[g(i("input",{type:"number",min:"1","onUpdate:modelValue":o[0]||(o[0]=d=>e(a).ratioW=d),onInput:R,class:"input input-bordered w-full text-center","aria-label":e(t)("ratio_w_aria")},null,40,Pe),[[v,e(a).ratioW,void 0,{number:!0}]]),o[9]||(o[9]=i("span",{class:"text-2xl font-bold text-base-content/40 select-none"},":",-1)),g(i("input",{type:"number",min:"1","onUpdate:modelValue":o[1]||(o[1]=d=>e(a).ratioH=d),onInput:R,class:"input input-bordered w-full text-center","aria-label":e(t)("ratio_h_aria")},null,40,Le),[[v,e(a).ratioH,void 0,{number:!0}]]),i("button",{onClick:K,class:"btn btn-ghost btn-square","aria-label":e(t)("swap_aria")},[u(s,{name:"heroicons:arrows-right-left-20-solid",class:"w-5 h-5"})],8,Ie)])]),i("div",Ae,[i("div",Te,[i("label",Re,[i("span",Ge,n(e(t)("width_label")),1)]),i("label",He,[g(i("input",{id:"w-input",type:"number",min:"1","onUpdate:modelValue":o[2]||(o[2]=d=>e(a).width=d),onInput:Q,class:"grow w-full"},null,544),[[v,e(a).width,void 0,{number:!0}]]),o[10]||(o[10]=i("span",{class:"text-xs text-base-content/75"},"px",-1))])]),i("div",We,[i("label",je,[i("span",Fe,n(e(t)("height_label")),1)]),i("label",Me,[g(i("input",{id:"h-input",type:"number",min:"1","onUpdate:modelValue":o[3]||(o[3]=d=>e(a).height=d),onInput:Y,class:"grow w-full"},null,544),[[v,e(a).height,void 0,{number:!0}]]),o[11]||(o[11]=i("span",{class:"text-xs text-base-content/75"},"px",-1))])])]),i("button",{onClick:X,class:"btn btn-outline btn-sm gap-2 w-full"},[u(s,{name:"heroicons:lock-closed-20-solid",class:"w-4 h-4"}),f(" "+n(e(t)("lock_current")),1)]),i("div",Ue,[(b(!0),_(M,null,U(e(ie),(d,W)=>(b(),_("div",{key:W},[i("p",Ve,n(e(D)[W]),1),i("div",Ee,[(b(!0),_(M,null,U(d,P=>(b(),_("button",{key:P.label,onClick:jt=>
11$(P),class:he(["btn btn-sm",e(a).activePreset===P.label?"btn-primary":"btn-ghost border border-base-300"])},n(P.label),11,De))),128))])]))),128))])]),i("div",Ne,[i("div",Be,[i("div",Oe,[i("div",{class:"bg-primary/15 border-2 border-primary rounded-md flex items-center justify-center transition-all duration-300 ease-out",style:I({width:e(H).w+"px",height:e(H).h+"px"})},[i("span",$e,n(e(a).width)+" à "+n(e(a).height),1)],4)]),i("div",Qe,[e(L)?(b(),_("span",Ye,[f(n(e(t)("detected"))+": ",1),i("strong",Ke,n(e(L).w)+":"+n(e(L).h),1)])):y("",!0)])]),i("div",Xe,[i("div",Je,[i("p",Ze,n(e(t)("m_width")),1),i("p",et,n(e(a).width),1)]),i("div",tt,[i("p",at,n(e(t)("m_height")),1),i("p",it,n(e(a).height),1)]),i("div",ot,[i("p",rt,n(e(t)("m_mp")),1),i("p",st,n(e(J)),1)])]),i("div",nt,[i("p",lt,[u(s,{name:"heroicons:code-bracket-20-solid",class:"w-5 h-5 text-primary"}),f(" "+n(e(t)("code_title")),1)]),u(l,{content:e(Z),label:"CSS aspect-ratio",class:"!my-0"},null,8,["content"]),u(l,{content:e(ee),label:"HTML <img> (anti-CLS)",class:"!my-0"},null,8,["content"]),u(l,{content:e(te),label:e(t)("code_iframe"),class:"!my-0"},null,8,["content","label"])]),i("div",ct,[i("p",dt,[u(s,{name:"heroicons:photo-20-solid",class:"w-5 h-5 text-primary"}),f(" "+n(e(t)("png_title")),1)]),i("p",ut,n(e(t)("png_desc")),1),i("div",pt,[i("button",{onClick:o[4]||(o[4]=d=>G(!0)),disabled:e(w),class:"btn btn-outline btn-sm gap-2 flex-1"},[u(s,{name:"heroicons:arrow-down-tray-20-solid",class:"w-4 h-4"}),f(" "+n(e(t)("png_transparent")),1)],8,mt),i("button",{onClick:o[5]||(o[5]=d=>G(!1)),disabled:e(w),class:"btn btn-outline btn-sm gap-2 flex-1"},[u(s,{name:"heroicons:arrow-down-tray-20-solid",class:"w-4 h-4"}),f(" "+n(e(t)("png_white")),1)],8,bt)])])])]),i("div",_t,[i("label",ht,[g(i("input",{type:"checkbox","onUpdate:modelValue":o[6]||(o[6]=d=>e(a).showFit=d),class:"toggle toggle-primary"},null,512),[[ge,e(a).showFit]]),i("span",gt,n(e(t)("fit_toggle")),1)]),e(a).showFit?(b(),_("div",ft,[i("div",xt,[i("p",vt,n(e(t)("fit_intro")),1),i("div",wt,[i("div",qt,[i("label",zt,[i("span",yt,n(e(t)("container_w")),1)]),g(i("input",{type:"number",min:"1","onUpdate:modelValue":o[7]||(o[7]=d=>e(a).containerW=d),class:"input input-bordered input-sm w-full"},null,512),[[v,e(a).containerW,void 0,{number:!0}]])]),i("div",Ct,[i("label",St,[i("span",kt,n(e(t)("container_h")),1)]),g(i("input",{type:"number",min:"1","onUpdate:modelValue":o[8]||(o[8]=d=>e(a).containerH=d),class:"input input-bordered input-sm w-full"},null,512),[[v,e(a).containerH,void 0,{number:!0}]])])]),e(x)?(b(),_("p",Pt,[e(x).type==="letterbox"?(b(),_("span",Lt,n(e(t)("fit_letterbox",{px:e(x).barY})),1)):e(x).type==="pillarbox"?(b(),_("span",It,n(e(t)("fit_pillarbox",{px:e(x).barX})),1)):(b(),_("span",At,n(e(t)("fit_perfect")),1))])):y("",!0)]),e(q)?(b(),_("div",Tt,[i("div",{class:"bg-base-300 rounded-md flex items-center justify-center relative overflow-hidden border border-base-content/10",style:I({width:e(q).cw+"px",height:e(q).ch+"px"})},[i("div",{class:"bg-primary/40 border border-primary transition-all duration-300",style:I({width:e(q).iw+"px",height:e(q).ih+"px"})},null,4)],4)])):y("",!0)])):y("",!0)]),e(a).ads?(b(),j(c,{key:0})):y("",!0)]),_:1},8,["title","description","wiki-label","breadcrumb","see-also-links"])}}});function V(A){const t=A;t.__i18n=t.__i18n||[],t.__i18n.push({locale:"",resource:{pt:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de Aspect Ratio para Imagem, VÃdeo e Web â Grátis"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de Aspect Ratio"}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de proporção de tela e imagem para vÃdeo, design e web. Calcule resolução mantendo a proporção, descubra o aspect ratio de qualquer arquivo, gere CSS pronto e veja barras de letterbox. Grátis, sem cadastro."}},wiki_label:{t:0,b:{t:2,i:[{t:3}],s:"Proporção de tela (Aspect Ratio)"}},ratio_label:{t:0,b:{t:2,i:[{t:3}],s:"Proporção"}},ratio_w_aria:{t:0,b:{t:2,i:[{t:3}],s:"Largura da proporção"}},ratio_h_aria:{t:0,b:{t:2,i:[{t:3}],s:"Altura da proporção"}},swap_aria:{t:0,b:{t:2,i:[{t:3}],s:"Inverter proporção e dimensões"}},width_label:{t:0,b:{t:2,i:[{t:3}],s:"Largura"}},height_label:{t:0,b:{t:2,i:[{t:3}],s:"Altura"}},lock_current:{t:0,b:{t:2,i:[{t:3}],s:"Travar proporção das dimensões atuais"}},group_common:{t:0,b:{t:2,i:[{t:3}],s:"Comuns"}},group_social:{t:0,b:{t:2,i:[{t:3}],s:"Redes sociais"}},group_cinema:{t:0,b:{t:2,i:[{t:3}],s:"Cinema e vÃdeo"}},group_print:{t:0,b:{t:2,i:[{t:3}],s:"Impressão e papel"}},detected:{t:0,b:{t:2,i:[{t:3}],s:"Proporção das dimensões"}},m_width:{t:0,b:{t:2,i:[{t:3}],s:"Largura (px)"}},m_height:{t:0,b:{t:2,i:[{t:3}],s:"Altura (px)"}}
11,m_mp:{t:0,b:{t:2,i:[{t:3}],s:"Megapixels"}},code_title:{t:0,b:{t:2,i:[{t:3}],s:"Código pronto para usar"}},code_iframe:{t:0,b:{t:2,i:[{t:3}],s:"CSS iframe responsivo"}},png_title:{t:0,b:{t:2,i:[{t:3}],s:"Baixar guia PNG"}},png_desc:{t:0,b:{t:2,i:[{t:3}],s:"Gera uma imagem PNG na proporção exata selecionada, limpa e sem marcações. Ãtil como template de enquadramento ou base de design. O lado maior tem 2048px."}},png_transparent:{t:0,b:{t:2,i:[{t:3}],s:"PNG transparente"}},png_white:{t:0,b:{t:2,i:[{t:3}],s:"PNG fundo branco"}},fit_toggle:{t:0,b:{t:2,i:[{t:3}],s:"Calcular letterbox / barras (encaixe em container)"}},fit_intro:{t:0,b:{t:2,i:[{t:3}],s:"Informe o tamanho do container onde o conteúdo será exibido. A calculadora mostra quanto de barra preta sobra ao encaixar a proporção atual sem cortar nada."}},container_w:{t:0,b:{t:2,i:[{t:3}],s:"Container largura"}},container_h:{t:0,b:{t:2,i:[{t:3}],s:"Container altura"}},fit_letterbox:{t:0,b:{t:2,i:[{t:3,v:"Letterbox: "},{t:4,k:"px"},{t:3,v:"px de barra em cima e embaixo (total "},{t:4,k:"px"},{t:3,v:"px à 2)."}]}},fit_pillarbox:{t:0,b:{t:2,i:[{t:3,v:"Pillarbox: "},{t:4,k:"px"},{t:3,v:"px de barra em cada lateral."}]}},fit_perfect:{t:0,b:{t:2,i:[{t:3}],s:"Encaixe perfeito: nenhuma barra preta."}},d1:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de aspect ratio online e gratuita para quem trabalha com vÃdeo, design e desenvolvimento web. A ferramenta resolve a regra de três entre uma proporção (16:9, 4:3, 1:1, 21:9 e dezenas de outras) e os campos de largura e altura: você digita uma dimensão e a outra é calculada na hora, mantendo a proporção da imagem intacta. Também é possÃvel descobrir o aspect ratio de qualquer resolução existente â basta informar largura e altura que a ferramenta reduz automaticamente para a proporção mÃnima. Além do cálculo, ela entrega o código CSS pronto para colar no projeto, um preview que muda de tamanho em tempo real e um cálculo de letterbox para saber quanto de barra preta sobra ao encaixar um conteúdo dentro de um container de proporção diferente. Tudo roda no navegador, sem cadastro."}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Funcionalidades"}},f_1:{t:0,b:{t:2,i:[{t:3}],s:"Calcula largura ou altura mantendo a proporção"}},f_2:{t:0,b:{t:2,i:[{t:3}],s:"Dezenas de presets por contexto: redes sociais, cinema e impressão"}},f_3:{t:0,b:{t:2,i:[{t:3}],s:"Gera código CSS aspect-ratio, atributos de imagem anti-CLS e iframe responsivo"}},f_4:{t:0,b:{t:2,i:[{t:3}],s:"Cálculo de letterbox e pillarbox para encaixe em containers"}},f_5:{t:0,b:{t:2,i:[{t:3}],s:"Baixa guia PNG na proporção exata e preview que reage em tempo real"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Como o cálculo de proporção funciona"}},how_desc:{t:0,b:{t:2,i:[{t:3}],s:"A proporção de tela é a relação entre largura e altura, escrita como dois números separados por dois pontos. Em 16:9, por exemplo, para cada 16 unidades de largura há 9 de altura. O cálculo é uma regra de três simples: a altura sai de largura à (9 ÷ 16) e a largura, de altura à (16 ÷ 9). Para descobrir a proporção de uma imagem qualquer, divide-se largura e altura pelo maior divisor comum entre os dois, o que reduz, por exemplo, 1920Ã1080 para a forma mÃnima 16:9. à esse mesmo princÃpio que a calculadora aplica para manter qualquer redimensionamento sem distorção."}},use_cases_title:{t:0,b:{t:2,i:[{t:3}],s:"Casos de Uso"}},use_cases_intro:{t:0,b:{t:2,i:[{t:3}],s:"Os usos mais comuns da calculadora de proporção no dia a dia de quem produz conteúdo visual e código são:"}},use_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Edição e exportação de vÃdeo"}},use_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Converter um master 4K para HD, configurar resoluções de saÃda e descobrir a altura correta de um corte widescreen sem deformar a imagem."}},use_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Banners e layout responsivo"}},use_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Definir a altura de um banner a partir de uma largura fixa e gerar o CSS aspect-ratio que mantém a proporção em qualquer tela."}},use_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Conteúdo para redes sociais"}},use_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Acertar Story e Reels 9:16 (1080Ã1920px), feed Instagram 4:5 (1080Ã1350px) e thumbnail YouTube 16:9 (1280Ã720px) antes de exportar, evitando cortes indesejados na publicação."}},use_4_t:{t:0,b:{t:2,i:[{t:3}],s:"VÃdeo embeddado responsivo"}},use_4_d:{t:0,b:{t:2,i:[{t:3}
11],s:"Gerar o padrão de iframe com padding proporcional para incorporar players de vÃdeo que se adaptam à largura do container."}},use_5_t:{t:0,b:{t:2,i:[{t:3}],s:"Performance e Core Web Vitals"}},use_5_d:{t:0,b:{t:2,i:[{t:3}],s:"Preencher os atributos width e height de imagens para reservar espaço no layout e reduzir o deslocamento cumulativo (CLS)."}},use_6_t:{t:0,b:{t:2,i:[{t:3}],s:"Impressão e diagramação"}},use_6_d:{t:0,b:{t:2,i:[{t:3}],s:"Calcular dimensões proporcionais para A4, fotos e materiais impressos a partir de uma medida conhecida."}},how_to_use_title:{t:0,b:{t:2,i:[{t:3}],s:"Como Usar"}},step_1_title:{t:0,b:{t:2,i:[{t:3}],s:"Escolha a proporção"}},step_1_desc:{t:0,b:{t:2,i:[{t:3}],s:"Digite os dois números da proporção ou clique em um dos presets organizados por contexto. O preview e o código se atualizam na hora."}},step_2_title:{t:0,b:{t:2,i:[{t:3}],s:"Informe uma dimensão"}},step_2_desc:{t:0,b:{t:2,i:[{t:3}],s:"Preencha a largura ou a altura. O campo oposto é calculado automaticamente mantendo a proporção escolhida."}},step_3_title:{t:0,b:{t:2,i:[{t:3}],s:"Copie o código"}},step_3_desc:{t:0,b:{t:2,i:[{t:3}],s:"Use os botões de cópia para levar o CSS aspect-ratio, os atributos de imagem ou o iframe responsivo direto para o seu projeto."}},step_4_title:{t:0,b:{t:2,i:[{t:3}],s:"Cheque o letterbox (opcional)"}},step_4_desc:{t:0,b:{t:2,i:[{t:3}],s:"Ative o cálculo de barras, informe o tamanho do container e veja quanto de barra preta sobra ao encaixar o conteúdo."}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Perguntas e Respostas"}},faq_1_q:{t:0,b:{t:2,i:[{t:3}],s:"O que significa aspect ratio?"}},faq_1_a:{t:0,b:{t:2,i:[{t:3}],s:"Aspect ratio, ou proporção de tela, é a relação entre a largura e a altura de uma imagem, vÃdeo ou tela. à escrita como dois números separados por dois pontos, como 16:9 ou 4:3. O primeiro número representa a largura proporcional e o segundo, a altura. Uma proporção 16:9 não diz o tamanho real em pixels, apenas que a largura é sempre 16/9 vezes maior que a altura, seja num vÃdeo de 1280Ã720 ou de 3840Ã2160."}},faq_2_q:{t:0,b:{t:2,i:[{t:3}],s:"Como calcular a altura a partir da largura mantendo a proporção?"}},faq_2_a:{t:0,b:{t:2,i:[{t:3}],s:"Basta multiplicar a largura pela altura da proporção e dividir pela largura da proporção. Para uma largura de 1200px em 16:9, a conta é 1200 à 9 ÷ 16, que resulta em 675px de altura. A calculadora faz isso automaticamente: você escolhe a proporção, digita a largura e a altura aparece já calculada. O caminho inverso, achar a largura a partir da altura, segue a mesma lógica trocando os termos."}},faq_3_q:{t:0,b:{t:2,i:[{t:3}],s:"Qual a diferença entre 16:9, 4:3 e 21:9?"}},faq_3_a:{t:0,b:{t:2,i:[{t:3}],s:"São proporções com formatos diferentes. 4:3 é quase quadrado, padrão das TVs e monitores antigos. 16:9 é o widescreen atual, usado em quase todo vÃdeo online, TV e celular na horizontal. 21:9 é o ultrawide, mais alongado, comum em monitores de produtividade e em filmes com pegada cinematográfica. Quanto maior a diferença entre os dois números, mais alongada e panorâmica é a imagem."}},faq_4_q:{t:0,b:{t:2,i:[{t:3}],s:"O que é letterbox e pillarbox?"}},faq_4_a:{t:0,b:{t:2,i:[{t:3}],s:"São as barras pretas que aparecem quando um conteúdo é exibido num espaço de proporção diferente, sem cortar nada. Letterbox são as barras horizontais em cima e embaixo, comuns ao assistir um filme widescreen numa tela mais quadrada. Pillarbox são as barras verticais nas laterais, que surgem ao exibir um vÃdeo mais quadrado numa tela widescreen. A calculadora informa exatamente quantos pixels de barra sobram em cada caso."}},faq_5_q:{t:0,b:{t:2,i:[{t:3}],s:"Como usar aspect-ratio no CSS?"}}
11,faq_5_a:{t:0,b:{t:2,i:[{t:3}],s:"A propriedade aspect-ratio do CSS reserva o espaço de um elemento na proporção desejada sem precisar fixar a altura. Para um bloco 16:9, basta escrever aspect-ratio: 16 / 9 que o navegador calcula a altura a partir da largura disponÃvel. à a forma moderna de manter proporções responsivas e substitui o antigo truque do padding-bottom percentual. A calculadora gera essa linha já com os valores da proporção selecionada."}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Ferramentas Diversas"}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Redimensionar Imagem"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Recortar Imagem"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Regra de Três"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de Porcentagem"}}},en:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Aspect Ratio Calculator for Image, Video and Web â Free"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Aspect Ratio Calculator"}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Image and video aspect ratio calculator â calculate width or height while keeping the ratio, determine the ratio of any image, get ready-to-use CSS code and check letterbox bars. Free, no sign-up."}},wiki_label:{t:0,b:{t:2,i:[{t:3}],s:"Aspect ratio (image)"}},ratio_label:{t:0,b:{t:2,i:[{t:3}],s:"Ratio"}},ratio_w_aria:{t:0,b:{t:2,i:[{t:3}],s:"Ratio width"}},ratio_h_aria:{t:0,b:{t:2,i:[{t:3}],s:"Ratio height"}},swap_aria:{t:0,b:{t:2,i:[{t:3}],s:"Swap ratio and dimensions"}},width_label:{t:0,b:{t:2,i:[{t:3}],s:"Width"}},height_label:{t:0,b:{t:2,i:[{t:3}],s:"Height"}},lock_current:{t:0,b:{t:2,i:[{t:3}],s:"Lock ratio from current dimensions"}},group_common:{t:0,b:{t:2,i:[{t:3}],s:"Common"}},group_social:{t:0,b:{t:2,i:[{t:3}],s:"Social media"}},group_cinema:{t:0,b:{t:2,i:[{t:3}],s:"Cinema and video"}},group_print:{t:0,b:{t:2,i:[{t:3}],s:"Print and paper"}},detected:{t:0,b:{t:2,i:[{t:3}],s:"Dimensions ratio"}},m_width:{t:0,b:{t:2,i:[{t:3}],s:"Width (px)"}},m_height:{t:0,b:{t:2,i:[{t:3}],s:"Height (px)"}},m_mp:{t:0,b:{t:2,i:[{t:3}],s:"Megapixels"}},code_title:{t:0,b:{t:2,i:[{t:3}],s:"Ready-to-use code"}},code_iframe:{t:0,b:{t:2,i:[{t:3}],s:"Responsive iframe CSS"}},png_title:{t:0,b:{t:2,i:[{t:3}],s:"Download PNG guide"}},png_desc:{t:0,b:{t:2,i:[{t:3}],s:"Generates a PNG image in the exact selected ratio, clean and unmarked. Useful as a framing template or design base. The longest side is 2048px."}},png_transparent:{t:0,b:{t:2,i:[{t:3}],s:"Transparent PNG"}},png_white:{t:0,b:{t:2,i:[{t:3}],s:"White background PNG"}},fit_toggle:{t:0,b:{t:2,i:[{t:3}],s:"Calculate letterbox / bars (fit into container)"}},fit_intro:{t:0,b:{t:2,i:[{t:3}],s:"Enter the size of the container where the content will be displayed. The calculator shows how much black bar is left when the current ratio is fitted without cropping anything."}},container_w:{t:0,b:{t:2,i:[{t:3}],s:"Container width"}},container_h:{t:0,b:{t:2,i:[{t:3}],s:"Container height"}},fit_letterbox:{t:0,b:{t:2,i:[{t:3,v:"Letterbox: "},{t:4,k:"px"},{t:3,v:"px of bar on the top and bottom (total "},{t:4,k:"px"},{t:3,v:"px à 2)."}]}},fit_pillarbox:{t:0,b:{t:2,i:[{t:3,v:"Pillarbox: "},{t:4,k:"px"},{t:3,v:"px of bar on each side."}]}},fit_perfect:{t:0,b:{t:2,i:[{t:3}],s:"Perfect fit: no black bars."}},d1:{t:0,b:{t:2,i:[{t:3}],s:"Free online aspect ratio calculator for anyone working with video, design and web development. The tool solves the proportion between a ratio (16:9, 4:3, 1:1, 21:9 and dozens of others) and the width and height fields: type one dimension and the other is calculated instantly, keeping the ratio intact. It also determines the ratio of any image you already have, delivers ready-to-paste CSS code, shows a preview that resizes in real time, and calculates letterbox bars so you know how much black bar is left when fitting content into a container of a different ratio. Everything runs in the browser, no sign-up."}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Features"}},f_1:{t:0,b:{t:2,i:[{t:3}],s:"Calculates width or height while keeping the ratio"}},f_2:{t:0,b:{t:2,i:[{t:3}],s:"Dozens of presets by context: social media, cinema and print"}},f_3:{t:0,b:{t:2,i:[{t:3}],s:"Generates CSS aspect-ratio code, anti-CLS image attributes and responsive iframe"}},f_4:{t:0,b:{t:2,i:[{t:3}],s:"Letterbox and pillarbox calculation for fitting into containers"}},f_5:{t:0,b:{t:2,i:[{t:3}],s:"Downloads a PNG guide in the exact ratio plus a real-time preview"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"How aspect ratio calculation works"}}
11,how_desc:{t:0,b:{t:2,i:[{t:3}],s:"An aspect ratio is the relationship between width and height, written as two numbers separated by a colon. In 16:9, for every 16 units of width there are 9 of height. The calculation is a simple proportion: height comes from width à (9 ÷ 16) and width from height à (16 ÷ 9). To determine the ratio of any image, you divide its width and height by the greatest common divisor between them, which reduces, for example, 1920Ã1080 to its simplest form 16:9. This is the same principle the calculator applies to keep any resize free of distortion."}},use_cases_title:{t:0,b:{t:2,i:[{t:3}],s:"Use Cases"}},use_cases_intro:{t:0,b:{t:2,i:[{t:3}],s:"The most common uses of the aspect ratio calculator in the daily routine of those who produce visual content and code are:"}},use_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Video editing and export"}},use_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Convert a 4K master to HD, set output resolutions and find the correct height of a widescreen crop without distorting the image."}},use_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Banners and responsive layout"}},use_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Set the height of a banner from a fixed width and generate the CSS aspect-ratio that keeps the proportion on any screen."}},use_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Social media content"}},use_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Get Story 9:16 (1080Ã1920px), Instagram feed 4:5 (1080Ã1350px) and YouTube thumbnail 16:9 (1280Ã720px) right before exporting, avoiding unwanted crops on publishing."}},use_4_t:{t:0,b:{t:2,i:[{t:3}],s:"Responsive embedded video"}},use_4_d:{t:0,b:{t:2,i:[{t:3}],s:"Generate the iframe pattern with proportional padding to embed video players that adapt to the container width."}},use_5_t:{t:0,b:{t:2,i:[{t:3}],s:"Performance and Core Web Vitals"}},use_5_d:{t:0,b:{t:2,i:[{t:3}],s:"Fill in the width and height attributes of images to reserve layout space and reduce cumulative layout shift (CLS)."}},use_6_t:{t:0,b:{t:2,i:[{t:3}],s:"Print and layout"}},use_6_d:{t:0,b:{t:2,i:[{t:3}],s:"Calculate proportional dimensions for A4, photos and printed materials from a known measurement."}},how_to_use_title:{t:0,b:{t:2,i:[{t:3}],s:"How to Use"}},step_1_title:{t:0,b:{t:2,i:[{t:3}],s:"Choose the ratio"}},step_1_desc:{t:0,b:{t:2,i:[{t:3}],s:"Type the two numbers of the ratio or click one of the presets organized by context. The preview and the code update instantly."}},step_2_title:{t:0,b:{t:2,i:[{t:3}],s:"Enter one dimension"}},step_2_desc:{t:0,b:{t:2,i:[{t:3}],s:"Fill in the width or the height. The opposite field is calculated automatically, keeping the chosen ratio."}},step_3_title:{t:0,b:{t:2,i:[{t:3}],s:"Copy the code"}},step_3_desc:{t:0,b:{t:2,i:[{t:3}],s:"Use the copy buttons to take the CSS aspect-ratio, the image attributes or the responsive iframe straight into your project."}},step_4_title:{t:0,b:{t:2,i:[{t:3}],s:"Check the letterbox (optional)"}},step_4_desc:{t:0,b:{t:2,i:[{t:3}],s:"Turn on the bar calculation, enter the container size and see how much black bar is left when fitting the content."}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Frequently Asked Questions"}},faq_1_q:{t:0,b:{t:2,i:[{t:3}],s:"What does aspect ratio mean?"}},faq_1_a:{t:0,b:{t:2,i:[{t:3}],s:"An aspect ratio is the relationship between the width and height of an image, video or screen. It is written as two numbers separated by a colon, such as 16:9 or 4:3. The first number represents the proportional width and the second, the height. A 16:9 ratio does not state the real size in pixels, only that the width is always 16/9 times the height, whether on a 1280Ã720 or a 3840Ã2160 video."}},faq_2_q:{t:0,b:{t:2,i:[{t:3}],s:"How do I calculate height from width while keeping the ratio?"}},faq_2_a:{t:0,b:{t:2,i:[{t:3}
11],s:"Just multiply the width by the ratio's height and divide by the ratio's width. For a width of 1200px in 16:9, the math is 1200 à 9 ÷ 16, which gives 675px of height. The calculator does this automatically: you choose the ratio, type the width and the height appears already calculated. The reverse path, finding the width from the height, follows the same logic by swapping the terms."}},faq_3_q:{t:0,b:{t:2,i:[{t:3}],s:"What is the difference between 16:9, 4:3 and 21:9?"}},faq_3_a:{t:0,b:{t:2,i:[{t:3}],s:"They are ratios with different shapes. 4:3 is almost square, the standard of old TVs and monitors. 16:9 is the current widescreen, used on nearly all online video, TV and phones held horizontally. 21:9 is ultrawide, more elongated, common on productivity monitors and on films with a cinematic feel. The larger the difference between the two numbers, the more elongated and panoramic the image."}},faq_4_q:{t:0,b:{t:2,i:[{t:3}],s:"What are letterbox and pillarbox?"}},faq_4_a:{t:0,b:{t:2,i:[{t:3}],s:"They are the black bars that appear when content is shown in a space of a different ratio, without cropping anything. Letterbox are the horizontal bars on the top and bottom, common when watching a widescreen film on a more square screen. Pillarbox are the vertical bars on the sides, which appear when showing a more square video on a widescreen screen. The calculator tells you exactly how many pixels of bar are left in each case."}},faq_5_q:{t:0,b:{t:2,i:[{t:3}],s:"How do I use aspect-ratio in CSS?"}}
11,faq_5_a:{t:0,b:{t:2,i:[{t:3}],s:"The CSS aspect-ratio property reserves an element's space in the desired ratio without having to fix the height. For a 16:9 block, you just write aspect-ratio: 16 / 9 and the browser calculates the height from the available width. It is the modern way to keep responsive proportions and replaces the old padding-bottom percentage trick. The calculator generates this line already with the values of the selected ratio."}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Miscellaneous Tools"}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Resize Image"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Crop Image"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Rule of Three"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Percentage Calculator"}}},es:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de Aspect Ratio para Imagen, VÃdeo y Web â Gratis"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de Aspect Ratio"}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de relación de aspecto (aspect ratio) para vÃdeo, diseño y web. Calcula el ancho o el alto manteniendo la proporción, determina la relación de cualquier imagen, obtén el código CSS listo y comprueba las barras de letterbox. Gratis, sin registro."}},wiki_label:{t:0,b:{t:2,i:[{t:3}],s:"Relación de aspecto (imagen)"}},ratio_label:{t:0,b:{t:2,i:[{t:3}],s:"Relación"}},ratio_w_aria:{t:0,b:{t:2,i:[{t:3}],s:"Ancho de la relación"}},ratio_h_aria:{t:0,b:{t:2,i:[{t:3}],s:"Alto de la relación"}},swap_aria:{t:0,b:{t:2,i:[{t:3}],s:"Invertir relación y dimensiones"}},width_label:{t:0,b:{t:2,i:[{t:3}],s:"Ancho"}},height_label:{t:0,b:{t:2,i:[{t:3}],s:"Alto"}},lock_current:{t:0,b:{t:2,i:[{t:3}],s:"Fijar la relación de las dimensiones actuales"}},group_common:{t:0,b:{t:2,i:[{t:3}],s:"Comunes"}},group_social:{t:0,b:{t:2,i:[{t:3}],s:"Redes sociales"}},group_cinema:{t:0,b:{t:2,i:[{t:3}],s:"Cine y vÃdeo"}},group_print:{t:0,b:{t:2,i:[{t:3}],s:"Impresión y papel"}},detected:{t:0,b:{t:2,i:[{t:3}],s:"Relación de las dimensiones"}},m_width:{t:0,b:{t:2,i:[{t:3}],s:"Ancho (px)"}},m_height:{t:0,b:{t:2,i:[{t:3}],s:"Alto (px)"}},m_mp:{t:0,b:{t:2,i:[{t:3}],s:"MegapÃxeles"}},code_title:{t:0,b:{t:2,i:[{t:3}],s:"Código listo para usar"}},code_iframe:{t:0,b:{t:2,i:[{t:3}],s:"CSS de iframe responsivo"}},png_title:{t:0,b:{t:2,i:[{t:3}],s:"Descargar guÃa PNG"}},png_desc:{t:0,b:{t:2,i:[{t:3}],s:"Genera una imagen PNG en la relación exacta seleccionada, limpia y sin marcas. Ãtil como plantilla de encuadre o base de diseño. El lado más largo tiene 2048px."}},png_transparent:{t:0,b:{t:2,i:[{t:3}],s:"PNG transparente"}},png_white:{t:0,b:{t:2,i:[{t:3}],s:"PNG con fondo blanco"}},fit_toggle:{t:0,b:{t:2,i:[{t:3}],s:"Calcular letterbox / barras (encaje en contenedor)"}},fit_intro:{t:0,b:{t:2,i:[{t:3}],s:"Indica el tamaño del contenedor donde se mostrará el contenido. La calculadora muestra cuánta barra negra queda al encajar la relación actual sin recortar nada."}},container_w:{t:0,b:{t:2,i:[{t:3}],s:"Ancho del contenedor"}},container_h:{t:0,b:{t:2,i:[{t:3}],s:"Alto del contenedor"}},fit_letterbox:{t:0,b:{t:2,i:[{t:3,v:"Letterbox: "},{t:4,k:"px"},{t:3,v:"px de barra arriba y abajo (total "},{t:4,k:"px"},{t:3,v:"px à 2)."}]}},fit_pillarbox:{t:0,b:{t:2,i:[{t:3,v:"Pillarbox: "},{t:4,k:"px"},{t:3,v:"px de barra a cada lado."}]}},fit_perfect:{t:0,b:{t:2,i:[{t:3}],s:"Encaje perfecto: sin barras negras."}},d1:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de relación de aspecto (aspect ratio) online y gratuita para quienes trabajan con vÃdeo, diseño y desarrollo web. La herramienta resuelve la proporción entre una relación (16:9, 4:3, 1:1, 21:9 y decenas más) y los campos de ancho y alto: escribes una dimensión y la otra se calcula al instante, manteniendo la relación intacta. Además del cálculo, determina la relación de cualquier imagen que ya tengas, entrega el código CSS listo para pegar, muestra una vista previa que cambia de tamaño en tiempo real y calcula las barras de letterbox para saber cuánta barra negra queda al encajar un contenido dentro de un contenedor de relación distinta. Todo funciona en el navegador, sin registro."}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Funcionalidades"}},f_1:{t:0,b:{t:2,i:[{t:3}],s:"Calcula el ancho o el alto manteniendo la relación"}},f_2:{t:0,b:{t:2,i:[{t:3}],s:"Decenas de ajustes por contexto: redes sociales, cine e impresión"}},f_3:{t:0,b:{t:2,i:[{t:3}],s:"Genera código CSS aspect-ratio, atributos de imagen anti-CLS e iframe responsivo"}},f_4:{t:0,b:{t:2,i:[{t:3}],s:"Cálculo de letterbox y pillarbox para el encaje en contenedores"}},f_5:{t:0,b:{t:2,i:[{t:3}],s:"Descarga una guÃa PNG en la relación exacta y vista previa en tiempo real"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Cómo funciona el cálculo de la relación de aspecto"}}
11,how_desc:{t:0,b:{t:2,i:[{t:3}],s:"La relación de aspecto es la proporción entre el ancho y el alto, escrita como dos números separados por dos puntos. En 16:9, por ejemplo, por cada 16 unidades de ancho hay 9 de alto. El cálculo es una proporción simple: el alto sale de ancho à (9 ÷ 16) y el ancho, de alto à (16 ÷ 9). Para determinar la relación de cualquier imagen, se dividen el ancho y el alto por el máximo común divisor entre ambos, lo que reduce, por ejemplo, 1920Ã1080 a su forma mÃnima 16:9. Es el mismo principio que la calculadora aplica para mantener cualquier redimensionado sin distorsión."}},use_cases_title:{t:0,b:{t:2,i:[{t:3}],s:"Casos de Uso"}},use_cases_intro:{t:0,b:{t:2,i:[{t:3}],s:"Los usos más comunes de la calculadora de relación de aspecto en el dÃa a dÃa de quienes producen contenido visual y código son:"}},use_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Edición y exportación de vÃdeo"}},use_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Convertir un máster 4K a HD, configurar resoluciones de salida y averiguar el alto correcto de un recorte panorámico sin deformar la imagen."}},use_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Banners y diseño responsivo"}},use_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Definir el alto de un banner a partir de un ancho fijo y generar el CSS aspect-ratio que mantiene la proporción en cualquier pantalla."}},use_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Contenido para redes sociales"}},use_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Acertar con la Historia 9:16 (1080Ã1920px), el feed de Instagram 4:5 (1080Ã1350px) y la miniatura de YouTube 16:9 (1280Ã720px) antes de exportar, evitando recortes no deseados al publicar."}},use_4_t:{t:0,b:{t:2,i:[{t:3}],s:"VÃdeo incrustado responsivo"}},use_4_d:{t:0,b:{t:2,i:[{t:3}],s:"Generar el patrón de iframe con padding proporcional para incrustar reproductores de vÃdeo que se adaptan al ancho del contenedor."}},use_5_t:{t:0,b:{t:2,i:[{t:3}],s:"Rendimiento y Core Web Vitals"}},use_5_d:{t:0,b:{t:2,i:[{t:3}],s:"Rellenar los atributos width y height de las imágenes para reservar espacio en el diseño y reducir el desplazamiento acumulado (CLS)."}},use_6_t:{t:0,b:{t:2,i:[{t:3}],s:"Impresión y maquetación"}},use_6_d:{t:0,b:{t:2,i:[{t:3}],s:"Calcular dimensiones proporcionales para A4, fotos y materiales impresos a partir de una medida conocida."}},how_to_use_title:{t:0,b:{t:2,i:[{t:3}],s:"Cómo Usar"}},step_1_title:{t:0,b:{t:2,i:[{t:3}],s:"Elige la relación"}},step_1_desc:{t:0,b:{t:2,i:[{t:3}],s:"Escribe los dos números de la relación o haz clic en uno de los ajustes organizados por contexto. La vista previa y el código se actualizan al instante."}},step_2_title:{t:0,b:{t:2,i:[{t:3}],s:"Indica una dimensión"}},step_2_desc:{t:0,b:{t:2,i:[{t:3}],s:"Rellena el ancho o el alto. El campo opuesto se calcula automáticamente manteniendo la relación elegida."}},step_3_title:{t:0,b:{t:2,i:[{t:3}],s:"Copia el código"}},step_3_desc:{t:0,b:{t:2,i:[{t:3}],s:"Usa los botones de copia para llevar el CSS aspect-ratio, los atributos de imagen o el iframe responsivo directamente a tu proyecto."}},step_4_title:{t:0,b:{t:2,i:[{t:3}],s:"Comprueba el letterbox (opcional)"}},step_4_desc:{t:0,b:{t:2,i:[{t:3}],s:"Activa el cálculo de barras, indica el tamaño del contenedor y mira cuánta barra negra queda al encajar el contenido."}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Preguntas Frecuentes"}},faq_1_q:{t:0,b:{t:2,i:[{t:3}],s:"¿Qué significa aspect ratio?"}},faq_1_a:{t:0,b:{t:2,i:[{t:3}],s:"El aspect ratio, o relación de aspecto, es la proporción entre el ancho y el alto de una imagen, vÃdeo o pantalla. Se escribe como dos números separados por dos puntos, como 16:9 o 4:3. El primer número representa el ancho proporcional y el segundo, el alto. Una relación 16:9 no indica el tamaño real en pÃxeles, solo que el ancho es siempre 16/9 veces el alto, ya sea en un vÃdeo de 1280Ã720 o de 3840Ã2160."}},faq_2_q:{t:0,b:{t:2,i:[{t:3}],s:"¿Cómo calculo el alto a partir del ancho manteniendo la relación?"}},faq_2_a:{t:0,b:{t:2,i:[{t:3}],s:"Basta con multiplicar el ancho por el alto de la relación y dividir por el ancho de la relación. Para un ancho de 1200px en 16:9, la cuenta es 1200 à 9 ÷ 16, que da 675px de alto. La calculadora lo hace automáticamente: eliges la relación, escribes el ancho y el alto aparece ya calculado. El camino inverso, hallar el ancho a partir del alto, sigue la misma lógica intercambiando los términos."}},faq_3_q:{t:0,b:{t:2,i:[{t:3}],s:"¿Cuál es la diferencia entre 16:9, 4:3 y 21:9?"}},faq_3_a:{t:0,b:{t:2,i:[{t:3}],s:"Son relaciones con formatos distintos. 4:3 es casi cuadrado, el estándar de las televisiones y monitores antiguos. 16:9 es el panorámico actual, usado en casi todo el vÃdeo online, la televisión y los móviles en horizontal. 21:9 es el ultrapanorámico, más alargado, común en monitores de productividad y en pelÃculas con un aire cinematográfico. Cuanto mayor es la diferencia entre los dos números, más alargada y panorámica resulta la imagen."}},faq_4_q:{t:0,b:{t:2,i:[{t:3}],s:"¿Qué son el letterbox y el pillarbox?"}},faq_4_a:{t:0,b:{t:2,i:[{t:3}],s:"Son las barras negras que aparecen cuando un contenido se muestra en un espacio de relación distinta, sin re
11cortar nada. El letterbox son las barras horizontales arriba y abajo, habituales al ver una pelÃcula panorámica en una pantalla más cuadrada. El pillarbox son las barras verticales a los lados, que surgen al mostrar un vÃdeo más cuadrado en una pantalla panorámica. La calculadora indica exactamente cuántos pÃxeles de barra quedan en cada caso."}},faq_5_q:{t:0,b:{t:2,i:[{t:3}],s:"¿Cómo uso aspect-ratio en CSS?"}},faq_5_a:{t:0,b:{t:2,i:[{t:3}],s:"La propiedad aspect-ratio de CSS reserva el espacio de un elemento en la relación deseada sin necesidad de fijar el alto. Para un bloque 16:9, basta con escribir aspect-ratio: 16 / 9 y el navegador calcula el alto a partir del ancho disponible. Es la forma moderna de mantener proporciones responsivas y sustituye al antiguo truco del padding-bottom porcentual. La calculadora genera esta lÃnea ya con los valores de la relación seleccionada."}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Herramientas Diversas"}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Redimensionar Imagen"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Recortar Imagen"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Regla de Tres"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de Porcentajes"}}},fr:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Calculateur d'Aspect Ratio pour Image, Vidéo et Web â Gratuit"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Calculateur d'Aspect Ratio"}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Calculateur d'aspect ratio pour image et vidéo â calculez la largeur ou la hauteur en conservant le rapport, déterminez le ratio de n'importe quelle image, obtenez le code CSS prêt à l'emploi et vérifiez les barres de letterbox. Gratuit, sans inscription."}},wiki_label:{t:0,b:{t:2,i:[{t:3}],s:"Format d'image (rapport hauteur/largeur)"}},ratio_label:{t:0,b:{t:2,i:[{t:3}],s:"Rapport"}},ratio_w_aria:{t:0,b:{t:2,i:[{t:3}],s:"Largeur du rapport"}},ratio_h_aria:{t:0,b:{t:2,i:[{t:3}],s:"Hauteur du rapport"}},swap_aria:{t:0,b:{t:2,i:[{t:3}],s:"Inverser le rapport et les dimensions"}},width_label:{t:0,b:{t:2,i:[{t:3}],s:"Largeur"}},height_label:{t:0,b:{t:2,i:[{t:3}],s:"Hauteur"}},lock_current:{t:0,b:{t:2,i:[{t:3}],s:"Verrouiller le rapport des dimensions actuelles"}},group_common:{t:0,b:{t:2,i:[{t:3}],s:"Courants"}},group_social:{t:0,b:{t:2,i:[{t:3}],s:"Réseaux sociaux"}},group_cinema:{t:0,b:{t:2,i:[{t:3}],s:"Cinéma et vidéo"}},group_print:{t:0,b:{t:2,i:[{t:3}],s:"Impression et papier"}},detected:{t:0,b:{t:2,i:[{t:3}],s:"Rapport des dimensions"}},m_width:{t:0,b:{t:2,i:[{t:3}],s:"Largeur (px)"}},m_height:{t:0,b:{t:2,i:[{t:3}],s:"Hauteur (px)"}},m_mp:{t:0,b:{t:2,i:[{t:3}],s:"Mégapixels"}},code_title:{t:0,b:{t:2,i:[{t:3}],s:"Code prêt à l'emploi"}},code_iframe:{t:0,b:{t:2,i:[{t:3}],s:"CSS iframe responsive"}},png_title:{t:0,b:{t:2,i:[{t:3}],s:"Télécharger le guide PNG"}},png_desc:{t:0,b:{t:2,i:[{t:3}],s:"Génère une image PNG dans le rapport exact sélectionné, propre et sans marques. Utile comme gabarit de cadrage ou base de design. Le côté le plus long fait 2048px."}},png_transparent:{t:0,b:{t:2,i:[{t:3}],s:"PNG transparent"}},png_white:{t:0,b:{t:2,i:[{t:3}],s:"PNG fond blanc"}},fit_toggle:{t:0,b:{t:2,i:[{t:3}],s:"Calculer le letterbox / barres (ajustement dans un conteneur)"}},fit_intro:{t:0,b:{t:2,i:[{t:3}],s:"Indiquez la taille du conteneur où le contenu sera affiché. La calculatrice indique combien de barre noire reste lors de l'ajustement du rapport actuel sans rien couper."}},container_w:{t:0,b:{t:2,i:[{t:3}],s:"Largeur du conteneur"}},container_h:{t:0,b:{t:2,i:[{t:3}],s:"Hauteur du conteneur"}},fit_letterbox:{t:0,b:{t:2,i:[{t:3,v:"Letterbox : "},{t:4,k:"px"},{t:3,v:"px de barre en haut et en bas (total "},{t:4,k:"px"},{t:3,v:"px à 2)."}]}},fit_pillarbox:{t:0,b:{t:2,i:[{t:3,v:"Pillarbox : "},{t:4,k:"px"},{t:3,v:"px de barre de chaque côté."}]}},fit_perfect:{t:0,b:{t:2,i:[{t:3}],s:"Ajustement parfait : aucune barre noire."}},d1:{t:0,b:{t:2,i:[{t:3}],s:"Calculateur d'aspect ratio en ligne et gratuit pour ceux qui travaillent avec la vidéo, le design et le développement web. L'outil résout la proportion entre un rapport (16:9, 4:3, 1:1, 21:9 et des dizaines d'autres) et les champs largeur et hauteur : vous tapez une dimension et l'autre est calculée instantanément, en conservant le rapport de l'image intact. Il est aussi possible de déterminer le rapport de n'importe quelle résolution existante â indiquez la largeur et la hauteur et l'outil réduit automatiquement au rapport minimal. En plus du calcul, il génère le code CSS prêt
11à coller, affiche un aperçu en temps réel et calcule les barres de letterbox pour savoir combien de barre noire reste lors de l'ajustement d'un contenu dans un conteneur de rapport différent. Tout fonctionne dans le navigateur, sans inscription."}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Fonctionnalités"}},f_1:{t:0,b:{t:2,i:[{t:3}],s:"Calcule la largeur ou la hauteur en conservant le rapport"}},f_2:{t:0,b:{t:2,i:[{t:3}],s:"Des dizaines de préréglages par contexte : réseaux sociaux, cinéma et impression"}},f_3:{t:0,b:{t:2,i:[{t:3}],s:"Génère le code CSS aspect-ratio, les attributs d'image anti-CLS et l'iframe responsive"}},f_4:{t:0,b:{t:2,i:[{t:3}],s:"Calcul du letterbox et du pillarbox pour l'ajustement dans des conteneurs"}},f_5:{t:0,b:{t:2,i:[{t:3}],s:"Télécharge un guide PNG dans le rapport exact et aperçu en temps réel"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Comment fonctionne le calcul de l'aspect ratio"}},how_desc:{t:0,b:{t:2,i:[{t:3}],s:"Un aspect ratio est la relation entre la largeur et la hauteur, écrite sous la forme de deux nombres séparés par deux-points. En 16:9, par exemple, pour 16 unités de largeur il y a 9 de hauteur. Le calcul est une simple proportion : la hauteur se calcule par largeur à (9 ÷ 16) et la largeur par hauteur à (16 ÷ 9). Pour déterminer le rapport de n'importe quelle image, on divise sa largeur et sa hauteur par leur plus grand diviseur commun, ce qui réduit par exemple 1920Ã1080 à sa forme minimale 16:9. C'est ce même principe que la calculatrice applique pour conserver tout redimensionnement sans distorsion."}},use_cases_title:{t:0,b:{t:2,i:[{t:3}],s:"Cas d'utilisation"}},use_cases_intro:{t:0,b:{t:2,i:[{t:3}],s:"Les usages les plus courants de la calculatrice d'aspect ratio dans le quotidien de ceux qui produisent du contenu visuel et du code sont :"}},use_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Montage et export vidéo"}},use_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Convertir un master 4K en HD, configurer les résolutions de sortie et trouver la hauteur correcte d'un recadrage widescreen sans déformer l'image."}},use_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Bannières et mise en page responsive"}},use_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Définir la hauteur d'une bannière à partir d'une largeur fixe et générer le CSS aspect-ratio qui conserve les proportions sur n'importe quel écran."}},use_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Contenu pour les réseaux sociaux"}},use_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Obtenir Story 9:16 (1080Ã1920px), feed Instagram 4:5 (1080Ã1350px) et miniature YouTube 16:9 (1280Ã720px) avant d'exporter, pour éviter les recadrages non désirés à la publication."}},use_4_t:{t:0,b:{t:2,i:[{t:3}],s:"Vidéo intégrée responsive"}},use_4_d:{t:0,b:{t:2,i:[{t:3}],s:"Générer le modèle d'iframe avec padding proportionnel pour intégrer des lecteurs vidéo qui s'adaptent à la largeur du conteneur."}},use_5_t:{t:0,b:{t:2,i:[{t:3}],s:"Performance et Core Web Vitals"}},use_5_d:{t:0,b:{t:2,i:[{t:3}],s:"Renseigner les attributs width et height des images pour réserver l'espace dans la mise en page et réduire le décalage cumulatif (CLS)."}},use_6_t:{t:0,b:{t:2,i:[{t:3}],s:"Impression et mise en page"}},use_6_d:{t:0,b:{t:2,i:[{t:3}],s:"Calculer des dimensions proportionnelles pour l'A4, les photos et les supports imprimés à partir d'une mesure connue."}},how_to_use_title:{t:0,b:{t:2,i:[{t:3}],s:"Comment Utiliser"}},step_1_title:{t:0,b:{t:2,i:[{t:3}],s:"Choisissez le rapport"}},step_1_desc:{t:0,b:{t:2,i:[{t:3}],s:"Tapez les deux nombres du rapport ou cliquez sur l'un des préréglages organisés par contexte. L'aperçu et le code se mettent à jour instantanément."}},step_2_title:{t:0,b:{t:2,i:[{t:3}],s:"Indiquez une dimension"}},step_2_desc:{t:0,b:{t:2,i:[{t:3}],s:"Renseignez la largeur ou la hauteur. Le champ opposé est calculé automatiquement en conservant le rapport choisi."}},step_3_title:{t:0,b:{t:2,i:[{t:3}],s:"Copiez le code"}},step_3_desc:{t:0,b:{t:2,i:[{t:3}],s:"Utilisez les boutons de copie pour transférer le CSS aspect-ratio, les attributs d'image ou l'iframe responsive directement dans votre projet."}},step_4_title:{t:0,b:{t:2,i:[{t:3}],s:"Vérifiez le letterbox (optionnel)"}},step_4_desc:{t:0,b:{t:2,i:[{t:3}],s:"Activez le calcul des barres, indiquez la taille du conteneur et voyez combien de barre noire reste lors de l'ajustement du contenu."}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Questions Fréquentes"}},faq_1_q:{t:0,b:{t:2,i:[{t:3}],s:"Que signifie aspect ratio ?"}},faq_1_a:{t:0,b:{t:2,i:[{t:3}],s:"L'aspect ratio, ou rapport hauteur/largeur, est la relation entre la largeur et la hauteur d'une image, d'une vidéo ou d'un écran. Il s'écrit sous la forme de deux nombres séparés par deux-points, comme 16:9 ou 4:3. Le premier nombre représente la largeur proportionnelle et le second, la hauteur. Un rapport 16:9 n'indique pas la taille réelle en pixels, seulement que la largeur est toujours 16/9 fois la hauteur, que ce soit dans une vidéo de 1280Ã720 ou de 3840Ã2160."}},faq_2_q:{t:0,b:{t:2,i:[{t:3}],s:"Comment calculer la hauteur à partir de la largeur en conservant le rapport ?"}},faq_2_a:{t:0,b:{t:2,i:[{t:3}],s:"Il suffit de multiplier la largeur par la hauteur du rapport et de diviser par la largeur du rapport. Pour une largeur de 1200px en 16:9, le calcul est 1200 à 9 ÷ 16, ce qui donne 675px de hauteur. La calculatrice le fait automatiquement : vous choisissez le rapport, tapez la largeur et la hauteur apparaît déjà calculée. Le chemin inverse, trouver la largeur à partir de la hauteur, suit la même logique en inversant les termes."}},faq_3_q:{t:0,b:{t:2,i:[{t:3}],s:"Quelle est la différence entre 16:9, 4:3 et 21:9 ?"}},faq_3_a:{t:0,b:{t:2,i:[{t:3}],s:"Ce sont des rapports de formats différents. Le 4:3 est presque carré, la norme des anciennes télévisions et moniteurs. Le 16:9 est le format grand écran actuel, utilisé dans presque toutes les vidéos en ligne, à la télévision et sur les téléphones en mode paysage. Le 21:9 est l'ultrawide, plus allongé, courant sur les moniteurs de productivité et dans les films à l'ambiance cinématographique. Plus la différence entre les deux nombres est grande, plus l'image est allongée et panoramique."}},faq_4_q:{t:0,b:{t:2,i:[{t:3}],s:"Que sont le letterbox et le pillarbox ?"}},faq_4_a:{t:0,b:{t:2,i:[{t:3}],s:"Ce sont les barres noires qui apparaissent lorsqu'un contenu est affiché dans un espace de rapport différent, sans rien couper. Le letterbox désigne les barres horizontales en haut et en bas, courantes lors du visionnage d'un film grand écran sur un écran plus carré. Le pillarbox désigne les barres verticales sur les côtés, qui apparaissent lors de l'affichage d'une vidéo plus carrée sur un écran grand écran. La calculatrice indique exactement combien de pixels de barre restent dans chaque cas."}},faq_5_q:{t:0,b:{t:2,i:[{t:3}],s:"Comment utiliser aspect-ratio en CSS ?"}}
11,faq_5_a:{t:0,b:{t:2,i:[{t:3}],s:"La propriété CSS aspect-ratio réserve l'espace d'un élément dans le rapport souhaité sans avoir à fixer la hauteur. Pour un bloc 16:9, il suffit d'écrire aspect-ratio: 16 / 9 et le navigateur calcule la hauteur à partir de la largeur disponible. C'est la façon moderne de conserver des proportions responsives et remplace l'ancien truc du padding-bottom en pourcentage. La calculatrice génère cette ligne déjà avec les valeurs du rapport sélectionné."}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Outils Divers"}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Redimensionner une Image"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Recadrer l'Image"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Règle de Trois"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Calculatrice de Pourcentage"}}},it:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Calcolatrice di Aspect Ratio per Immagini, Video e Web â Gratis"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Calcolatrice di Aspect Ratio"}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Calcolatrice di aspect ratio per immagini e video â calcola larghezza o altezza mantenendo le proporzioni, determina il rapporto di qualsiasi immagine, ottieni codice CSS pronto all'uso e verifica le bande nere. Gratis, senza registrazione."}},wiki_label:{t:0,b:{t:2,i:[{t:3}],s:"Rapporto d'aspetto (immagine)"}},ratio_label:{t:0,b:{t:2,i:[{t:3}],s:"Rapporto"}},ratio_w_aria:{t:0,b:{t:2,i:[{t:3}],s:"Larghezza del rapporto"}},ratio_h_aria:{t:0,b:{t:2,i:[{t:3}],s:"Altezza del rapporto"}},swap_aria:{t:0,b:{t:2,i:[{t:3}],s:"Inverti rapporto e dimensioni"}},width_label:{t:0,b:{t:2,i:[{t:3}],s:"Larghezza"}},height_label:{t:0,b:{t:2,i:[{t:3}],s:"Altezza"}},lock_current:{t:0,b:{t:2,i:[{t:3}],s:"Blocca il rapporto dalle dimensioni attuali"}},group_common:{t:0,b:{t:2,i:[{t:3}],s:"Comuni"}},group_social:{t:0,b:{t:2,i:[{t:3}],s:"Social media"}},group_cinema:{t:0,b:{t:2,i:[{t:3}],s:"Cinema e video"}},group_print:{t:0,b:{t:2,i:[{t:3}],s:"Stampa e carta"}},detected:{t:0,b:{t:2,i:[{t:3}],s:"Rapporto delle dimensioni"}},m_width:{t:0,b:{t:2,i:[{t:3}],s:"Larghezza (px)"}},m_height:{t:0,b:{t:2,i:[{t:3}],s:"Altezza (px)"}},m_mp:{t:0,b:{t:2,i:[{t:3}],s:"Megapixel"}},code_title:{t:0,b:{t:2,i:[{t:3}],s:"Codice pronto all'uso"}},code_iframe:{t:0,b:{t:2,i:[{t:3}],s:"CSS per iframe responsive"}},png_title:{t:0,b:{t:2,i:[{t:3}],s:"Scarica la guida PNG"}},png_desc:{t:0,b:{t:2,i:[{t:3}],s:"Genera un'immagine PNG nel rapporto selezionato esatto, pulita e senza filigrane. Utile come modello di inquadratura o base di progetto. Il lato più lungo è di 2048px."}},png_transparent:{t:0,b:{t:2,i:[{t:3}],s:"PNG trasparente"}},png_white:{t:0,b:{t:2,i:[{t:3}],s:"PNG con sfondo bianco"}},fit_toggle:{t:0,b:{t:2,i:[{t:3}],s:"Calcola le bande nere (adatta al contenitore)"}},fit_intro:{t:0,b:{t:2,i:[{t:3}],s:"Inserisci la dimensione del contenitore in cui verrà mostrato il contenuto. La calcolatrice mostra quanta banda nera resta quando il rapporto attuale viene adattato senza ritagliare nulla."}},container_w:{t:0,b:{t:2,i:[{t:3}],s:"Larghezza del contenitore"}},container_h:{t:0,b:{t:2,i:[{t:3}],s:"Altezza del contenitore"}},fit_letterbox:{t:0,b:{t:2,i:[{t:3,v:"Letterbox: "},{t:4,k:"px"},{t:3,v:"px di banda sopra e sotto (in totale "},{t:4,k:"px"},{t:3,v:"px à 2)."}]}},fit_pillarbox:{t:0,b:{t:2,i:[{t:3,v:"Pillarbox: "},{t:4,k:"px"},{t:3,v:"px di banda su ciascun lato."}]}},fit_perfect:{t:0,b:{t:2,i:[{t:3}],s:"Adattamento perfetto: nessuna banda nera."}},d1:{t:0,b:{t:2,i:[{t:3}],s:"Calcolatrice di aspect ratio online gratuita per chi lavora con video, design e sviluppo web. Lo strumento risolve la proporzione tra un rapporto (16:9, 4:3, 1:1, 21:9 e decine di altri) e i campi larghezza e altezza: digita una dimensione e l'altra viene calcolata all'istante, mantenendo intatto il rapporto. Determina anche il rapporto di qualsiasi immagine che possiedi già , fornisce codice CSS pronto da incollare, mostra un'anteprima che si ridimensiona in tempo reale e calcola le bande nere così da sapere quanta banda resta quando adatti il contenuto a un contenitore con un rapporto diverso. Tutto funziona nel browser, senza registrazione."}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Funzionalità "}},f_1:{t:0,b:{t:2,i:[{t:3}],s:"Calcola larghezza o altezza mantenendo il rapporto"}},f_2:{t:0,b:{t:2,i:[{t:3}],s:"Decine di preset per contesto: social media, cinema e stampa"}},f_3:{t:0,b:{t:2,i:[{t:3}],s:"Genera codice CSS aspect-ratio, attributi immagine anti-CLS e iframe responsive"}},f_4:{t:0,b:{t:2,i:[{t:3}],s:"Calcolo di letterbox e pillarbox per l'adattamento ai contenitori"}},f_5:{t:0,b:{t:2,i:[{t:3}],s:"Scarica una guida PNG nel rapporto esatto, più un'anteprima in tempo reale"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Come funziona il calcolo dell'aspect ratio"}}
11,how_desc:{t:0,b:{t:2,i:[{t:3}],s:"Un aspect ratio è la relazione tra larghezza e altezza, scritta come due numeri separati dai due punti. In 16:9, per ogni 16 unità di larghezza ce ne sono 9 di altezza. Il calcolo è una semplice proporzione: l'altezza si ottiene da larghezza à (9 ÷ 16) e la larghezza da altezza à (16 ÷ 9). Per determinare il rapporto di un'immagine qualsiasi si dividono la sua larghezza e altezza per il massimo comune divisore tra le due, il che riduce ad esempio 1920Ã1080 alla sua forma più semplice 16:9. à lo stesso principio che la calcolatrice applica per mantenere ogni ridimensionamento privo di distorsioni."}},use_cases_title:{t:0,b:{t:2,i:[{t:3}],s:"Casi d'Uso"}},use_cases_intro:{t:0,b:{t:2,i:[{t:3}],s:"Gli usi più comuni della calcolatrice di aspect ratio nella routine quotidiana di chi produce contenuti visivi e codice sono:"}},use_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Montaggio ed esportazione video"}},use_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Converti un master 4K in HD, imposta le risoluzioni di output e trova l'altezza corretta di un ritaglio widescreen senza distorcere l'immagine."}},use_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Banner e layout responsive"}},use_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Imposta l'altezza di un banner a partire da una larghezza fissa e genera il CSS aspect-ratio che mantiene la proporzione su qualsiasi schermo."}},use_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Contenuti per i social"}},use_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Imposta correttamente Storie 9:16 (1080Ã1920px), feed Instagram 4:5 (1080Ã1350px) e miniature YouTube 16:9 (1280Ã720px) prima di esportare, evitando ritagli indesiderati in fase di pubblicazione."}},use_4_t:{t:0,b:{t:2,i:[{t:3}],s:"Video incorporati responsive"}},use_4_d:{t:0,b:{t:2,i:[{t:3}],s:"Genera il pattern iframe con padding proporzionale per incorporare player video che si adattano alla larghezza del contenitore."}},use_5_t:{t:0,b:{t:2,i:[{t:3}],s:"Performance e Core Web Vitals"}},use_5_d:{t:0,b:{t:2,i:[{t:3}],s:"Compila gli attributi width e height delle immagini per riservare lo spazio nel layout e ridurre il cumulative layout shift (CLS)."}},use_6_t:{t:0,b:{t:2,i:[{t:3}],s:"Stampa e impaginazione"}},use_6_d:{t:0,b:{t:2,i:[{t:3}],s:"Calcola dimensioni proporzionali per A4, fotografie e materiali stampati a partire da una misura nota."}},how_to_use_title:{t:0,b:{t:2,i:[{t:3}],s:"Come Usarla"}},step_1_title:{t:0,b:{t:2,i:[{t:3}],s:"Scegli il rapporto"}},step_1_desc:{t:0,b:{t:2,i:[{t:3}],s:"Digita i due numeri del rapporto oppure clicca su uno dei preset organizzati per contesto. L'anteprima e il codice si aggiornano all'istante."}},step_2_title:{t:0,b:{t:2,i:[{t:3}],s:"Inserisci una dimensione"}},step_2_desc:{t:0,b:{t:2,i:[{t:3}],s:"Compila la larghezza o l'altezza. Il campo opposto viene calcolato automaticamente, mantenendo il rapporto scelto."}},step_3_title:{t:0,b:{t:2,i:[{t:3}],s:"Copia il codice"}},step_3_desc:{t:0,b:{t:2,i:[{t:3}],s:"Usa i pulsanti di copia per portare il CSS aspect-ratio, gli attributi dell'immagine o l'iframe responsive direttamente nel tuo progetto."}},step_4_title:{t:0,b:{t:2,i:[{t:3}],s:"Verifica le bande nere (opzionale)"}},step_4_desc:{t:0,b:{t:2,i:[{t:3}],s:"Attiva il calcolo delle bande, inserisci la dimensione del contenitore e vedi quanta banda nera resta adattando il contenuto."}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Domande Frequenti"}},faq_1_q:{t:0,b:{t:2,i:[{t:3}],s:"Cosa significa aspect ratio?"}},faq_1_a:{t:0,b:{t:2,i:[{t:3}],s:"Un aspect ratio è la relazione tra la larghezza e l'altezza di un'immagine, un video o uno schermo. Si scrive come due numeri separati dai due punti, ad esempio 16:9 o 4:3. Il primo numero rappresenta la larghezza proporzionale e il secondo l'altezza. Un rapporto 16:9 non indica la dimensione reale in pixel, ma solo che la larghezza è sempre 16/9 dell'altezza, sia in un video 1280Ã720 sia in uno 3840Ã2160."}},faq_2_q:{t:0,b:{t:2,i:[{t:3}],s:"Come calcolo l'altezza dalla larghezza mantenendo il rapporto?"}},faq_2_a:{t:0,b:{t:2,i:[{t:3}],s:"Basta moltiplicare la larghezza per l'altezza del rapporto e dividere per la larghezza del rapporto. Per una larghezza di 1200px in 16:9, il calcolo è 1200 à 9 ÷ 16, che dà 675px di altezza. La calcolatrice lo fa automaticamente: scegli il rapporto, digiti la larghezza e l'altezza appare già calcolata. Il percorso inverso, trovare la larghezza dall'altezza, segue la stessa logica invertendo i termini."}},faq_3_q:{t:0,b:{t:2,i:[{t:3}],s:"Qual è la differenza tra 16:9, 4:3 e 21:9?"}}
11,faq_3_a:{t:0,b:{t:2,i:[{t:3}],s:"Sono rapporti con forme diverse. Il 4:3 è quasi quadrato, lo standard delle vecchie TV e dei vecchi monitor. Il 16:9 è l'attuale widescreen, usato in quasi tutti i video online, in TV e sui telefoni tenuti in orizzontale. Il 21:9 è ultrawide, più allungato, comune sui monitor da produttività e nei film dal taglio cinematografico. Maggiore è la differenza tra i due numeri, più l'immagine risulta allungata e panoramica."}},faq_4_q:{t:0,b:{t:2,i:[{t:3}],s:"Cosa sono letterbox e pillarbox?"}},faq_4_a:{t:0,b:{t:2,i:[{t:3}],s:"Sono le bande nere che compaiono quando un contenuto viene mostrato in uno spazio con un rapporto diverso, senza ritagliare nulla. Il letterbox è costituito dalle bande orizzontali sopra e sotto, comuni quando si guarda un film widescreen su uno schermo più quadrato. Il pillarbox è costituito dalle bande verticali ai lati, che compaiono mostrando un video più quadrato su uno schermo widescreen. La calcolatrice ti dice esattamente quanti pixel di banda restano in ciascun caso."}},faq_5_q:{t:0,b:{t:2,i:[{t:3}],s:"Come uso aspect-ratio in CSS?"}}
11,faq_5_a:{t:0,b:{t:2,i:[{t:3}],s:"La proprietà CSS aspect-ratio riserva lo spazio di un elemento nel rapporto desiderato senza dover fissare l'altezza. Per un blocco 16:9 basta scrivere aspect-ratio: 16 / 9 e il browser calcola l'altezza dalla larghezza disponibile. à il modo moderno di mantenere proporzioni responsive e sostituisce il vecchio trucco del padding-bottom in percentuale. La calcolatrice genera questa riga già con i valori del rapporto selezionato."}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Strumenti Vari"}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Ridimensionare Immagine"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Ritagliare Immagine"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Proporzione Semplice"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Calcolatrice di Percentuale"}}}}})}typeof V=="function"&&V(Wt);export{Wt as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.