[{"data":1,"prerenderedAt":404},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-right":8,"i-ph:caret-left":10,"components-aspect-ratio":12,"i-ph:code":402},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":396,"meta":397,"navigation":118,"path":398,"seo":399,"stem":400,"__hash__":401},"docs\u002Fdocs\u002Fcomponents\u002Faspect-ratio.md","Aspect Ratio",{"type":16,"value":17,"toc":391},"minimark",[18,22,26,207,212,266,270,301,305,308,387],[19,20,14],"h1",{"id":21},"aspect-ratio",[23,24,25],"p",{},"A layout component that constrains its content to a given aspect ratio. It automatically fills the available width and adjusts height to maintain the ratio. Images and videos inside will be automatically sized to cover the container.",[27,28,30],"aspect-ratio-example",{"source-path":29},"AspectRatio\u002FAspectRatio.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup lang=\"ts\">\nimport { AspectRatio } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAspectRatio :ratio=\"16 \u002F 9\">\n    \u003Cimg src=\"...\" alt=\"Image loading...\">\n  \u003C\u002FAspectRatio>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,76,103,113,120,130,153,188,198],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,67,71,73],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":55}," lang",[41,61,62],{"class":47},"=",[41,64,66],{"class":65},"sBR95","\"",[41,68,70],{"class":69},"sfmH-","ts",[41,72,66],{"class":65},[41,74,75],{"class":47},">\n",[41,77,79,82,85,88,91,94,97,100],{"class":43,"line":78},2,[41,80,81],{"class":51},"import",[41,83,84],{"class":47}," {",[41,86,87],{"class":55}," AspectRatio",[41,89,90],{"class":47}," }",[41,92,93],{"class":51}," from",[41,95,96],{"class":65}," '",[41,98,99],{"class":69},"@dolanske\u002Fvui",[41,101,102],{"class":65},"'\n",[41,104,106,109,111],{"class":43,"line":105},3,[41,107,108],{"class":47},"\u003C\u002F",[41,110,52],{"class":51},[41,112,75],{"class":47},[41,114,116],{"class":43,"line":115},4,[41,117,119],{"emptyLinePlaceholder":118},true,"\n",[41,121,123,125,128],{"class":43,"line":122},5,[41,124,48],{"class":47},[41,126,127],{"class":51},"template",[41,129,75],{"class":47},[41,131,133,136,139,142,144,146,149,151],{"class":43,"line":132},6,[41,134,135],{"class":47},"  \u003C",[41,137,138],{"class":51},"AspectRatio",[41,140,141],{"class":55}," :ratio",[41,143,62],{"class":47},[41,145,66],{"class":65},[41,147,148],{"class":69},"16 \u002F 9",[41,150,66],{"class":65},[41,152,75],{"class":47},[41,154,156,159,162,165,167,169,172,174,177,179,181,184,186],{"class":43,"line":155},7,[41,157,158],{"class":47},"    \u003C",[41,160,161],{"class":51},"img",[41,163,164],{"class":55}," src",[41,166,62],{"class":47},[41,168,66],{"class":65},[41,170,171],{"class":69},"...",[41,173,66],{"class":65},[41,175,176],{"class":55}," alt",[41,178,62],{"class":47},[41,180,66],{"class":65},[41,182,183],{"class":69},"Image loading...",[41,185,66],{"class":65},[41,187,75],{"class":47},[41,189,191,194,196],{"class":43,"line":190},8,[41,192,193],{"class":47},"  \u003C\u002F",[41,195,138],{"class":51},[41,197,75],{"class":47},[41,199,201,203,205],{"class":43,"line":200},9,[41,202,108],{"class":47},[41,204,127],{"class":51},[41,206,75],{"class":47},[208,209,211],"h3",{"id":210},"props","Props",[213,214,215,231],"table",{},[216,217,218],"thead",{},[219,220,221,225,228],"tr",{},[222,223,224],"th",{},"Name",[222,226,227],{},"Default",[222,229,230],{},"Type",[232,233,234],"tbody",{},[219,235,236,242,245],{},[237,238,239],"td",{},[38,240,241],{},"ratio",[237,243,244],{},"—",[237,246,247,250,251,254,255,258,259,258,262,265],{},[38,248,249],{},"number"," ",[252,253],"br",{}," The aspect ratio as a single number (e.g. ",[38,256,257],{},"16\u002F9",", ",[38,260,261],{},"1",[38,263,264],{},"4\u002F3","). Required.",[208,267,269],{"id":268},"slots","Slots",[213,271,272,284],{},[216,273,274],{},[219,275,276,278,281],{},[222,277,224],{},[222,279,280],{},"Accepts",[222,282,283],{},"Description",[232,285,286],{},[219,287,288,293,298],{},[237,289,290],{},[38,291,292],{},"default",[237,294,295],{},[38,296,297],{},"any",[237,299,300],{},"The content rendered inside the aspect ratio container",[208,302,304],{"id":303},"tokens","Tokens",[23,306,307],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[213,309,310,321],{},[216,311,312],{},[219,313,314,317,319],{},[222,315,316],{},"Token",[222,318,227],{},[222,320,283],{},[232,322,323,338,357,372],{},[219,324,325,330,335],{},[237,326,327],{},[38,328,329],{},"--vui-aspect-ratio-value",[237,331,332],{},[38,333,334],{},"0%",[237,336,337],{},"Aspect ratio as padding-bottom",[219,339,340,345,354],{},[237,341,342],{},[38,343,344],{},"--vui-aspect-ratio-radius",[237,346,347],{},[348,349,351],"a",{"href":350},"\u002Fdocs\u002Ftokens\u002Fborder-radius",[38,352,353],{},"var(--border-radius-m)",[237,355,356],{},"Border radius of the container",[219,358,359,364,369],{},[237,360,361],{},[38,362,363],{},"--vui-aspect-ratio-fit",[237,365,366],{},[38,367,368],{},"cover",[237,370,371],{},"Object-fit for inner media",[219,373,374,379,384],{},[237,375,376],{},[38,377,378],{},"--vui-aspect-ratio-position",[237,380,381],{},[38,382,383],{},"center",[237,385,386],{},"Object-position for inner media",[388,389,390],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":78,"depth":78,"links":392},[393,394,395],{"id":210,"depth":105,"text":211},{"id":268,"depth":105,"text":269},{"id":303,"depth":105,"text":304},"md",{},"\u002Fdocs\u002Fcomponents\u002Faspect-ratio",{"title":14,"description":25},"docs\u002Fcomponents\u002Faspect-ratio","uBFQ82GhmMhopeR7nGLp4PVLuwMM_w7eP8MhJOL1Oy8",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":403},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200881952]