[{"data":1,"prerenderedAt":351},["ShallowReactive",2],{"search-all-posts":3,"settings-global":47,"\u002Fblog\u002F2017-04-18-responsive-aspect-ratio-in-css":70},[4,10,17,23,28,34,39],{"title":5,"description":6,"path":7,"tags":8},"Responsive aspect ratio in CSS","Hoe maak je een responsive aspect ratio in CSS? Een aspect ratio is bijvoorbeeld toepasbaar op afbeeldingen, video’s, placeholders en iframes.","\u002Fblog\u002F2017-04-18-responsive-aspect-ratio-in-css",[9],"CSS",{"title":11,"description":12,"path":13,"tags":14},"Sketch plugin tips voor een snellere workflow","Voor het versnellen van je workflow in Sketch, de digitale ontwerptool voor designers, zijn de volgende plugins interessant.","\u002Fblog\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow",[15,16],"Design","Productiviteit",{"title":18,"description":19,"path":20,"tags":21},"WebKit naar watchOS 5","Tijdens de WWDC 2018 van Apple was er een leuk nieuwtje. WebKit komt naar watchOS. Dit betekent dat je, zodra watchOS 5 uit is, web content kan gaan consumeren!","\u002Fblog\u002F2018-06-11-webkit-naar-watchos-5",[22],"Apple",{"title":24,"description":25,"path":26,"tags":27},"CSS variabelen en preprocessor variabelen","In CSS zijn variabelen er voornamelijk om consistent hergebruikt te worden. De voor- en nadelen.","\u002Fblog\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen",[9],{"title":29,"description":30,"path":31,"tags":32},"Adobe XD en line-height","Als designer & developer werk je met verschillende tools. Hierbij loop je soms tegen dingen aan die je werkproces verstoren. Zo ook bij Adobe XD.","\u002Fblog\u002F2020-04-29-adobe-xd-en-line-height",[33,15],"Adobe",{"title":35,"description":36,"path":37,"tags":38},"Mijn favoriete Mac apps 2022","MacOS en apps, ik zou niet zonder kunnen. Persoonlijk gebruik ik een handje vol apps die wellicht voor jou ook de moeite waard zijn.","\u002Fblog\u002F2022-07-23-mijn-favoriete-mac-apps-2022",[16],{"title":40,"description":41,"path":42,"tags":43},"Shopify en shop munteenheid symbool","Shopify's Liquid shop object met geneste currency object shop.currency.symbol werkt niet. Als workaround kan je het cart object gebruiken.","\u002Fblog\u002F2022-08-07-shopify-en-shop-munteenheid-symbol",[44,45,46],"Shopify","Snippets","Notities",{"id":48,"title":49,"description":50,"extension":51,"github_url":52,"lang":53,"linkedin_url":54,"meta":55,"navigation":56,"noindex":67,"stem":68,"__hash__":69},"settings\u002Fsettings.yaml","Roy","Inspiratie en slimme oplossingen voor Shopify & tech.","yaml",null,"nl","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Froy-van-neden-10549761",{},[57,60,63,65],{"title":58,"to":59},"Home","\u002F",{"title":61,"to":62},"Blog","\u002Fblog",{"title":45,"to":64},"https:\u002F\u002Fgist.github.com\u002Froyvn",{"title":66,"to":54},"LinkedIn",false,"settings","-UwRePwvcv6cIOnnqX6vHLS1vLrRiCvBGOSHiNv7qA0",{"id":71,"title":5,"authors":72,"body":73,"date":342,"description":6,"draft":67,"extension":343,"image":344,"meta":345,"navigation":346,"noindex":67,"path":7,"readingTime":129,"seo":347,"stem":348,"tags":349,"__hash__":350},"posts\u002Fblog\u002F2017-04-18-responsive-aspect-ratio-in-css.md",[49],{"type":74,"value":75,"toc":338},"minimark",[76,97,102,105,116,157,252,256,334],[77,78,79,80,84,85,88,89,92,93,96],"p",{},"Een responsive aspect ratio creëer je met percentages ",[81,82,83],"code",{},"padding-top"," of ",[81,86,87],{},"padding-bottom",". Een percentage ",[81,90,91],{},"height"," is gebaseerd op de ",[81,94,95],{},"width"," van je div. Volledig responsive dus zodra je scherm klein wordt.",[98,99,101],"h2",{"id":100},"voorbeeld","Voorbeeld",[77,103,104],{},"In dit voorbeeld passen we een aspect ratio van 4:3 toe.",[77,106,107,108,111,112,115],{},"Zodra je ",[81,109,110],{},"padding-bottom: 100%;"," toepast heb je een 1:1 verhouding. Vanuit hier werk je naar de andere verhoudingen toe. Voor 4:3 is dat dan ",[81,113,114],{},"padding-bottom: 75%;",".",[117,118,123],"pre",{"className":119,"code":120,"language":121,"meta":122,"style":122},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"aspect-ratio aspect-ratio--4x3\">\u003C\u002Fdiv>\n","html","",[81,124,125],{"__ignoreMap":122},[126,127,130,134,138,142,145,149,152,154],"span",{"class":128,"line":129},"line",1,[126,131,133],{"class":132},"sVt8B","\u003C",[126,135,137],{"class":136},"s9eBZ","div",[126,139,141],{"class":140},"sScJk"," class",[126,143,144],{"class":132},"=",[126,146,148],{"class":147},"sZZnC","\"aspect-ratio aspect-ratio--4x3\"",[126,150,151],{"class":132},">\u003C\u002F",[126,153,137],{"class":136},[126,155,156],{"class":132},">\n",[117,158,162],{"className":159,"code":160,"language":161,"meta":122,"style":122},"language-css shiki shiki-themes github-light github-dark",".aspect-ratio {\n  width: 100%;\n  height: 0;\n  background-color: red;\n}\n.aspect-ratio.aspect-ratio--4x3 {\n  padding-bottom: 75%;\n}\n","css",[81,163,164,172,192,205,218,224,232,247],{"__ignoreMap":122},[126,165,166,169],{"class":128,"line":129},[126,167,168],{"class":140},".aspect-ratio",[126,170,171],{"class":132}," {\n",[126,173,175,179,182,185,189],{"class":128,"line":174},2,[126,176,178],{"class":177},"sj4cs","  width",[126,180,181],{"class":132},": ",[126,183,184],{"class":177},"100",[126,186,188],{"class":187},"szBVR","%",[126,190,191],{"class":132},";\n",[126,193,195,198,200,203],{"class":128,"line":194},3,[126,196,197],{"class":177},"  height",[126,199,181],{"class":132},[126,201,202],{"class":177},"0",[126,204,191],{"class":132},[126,206,208,211,213,216],{"class":128,"line":207},4,[126,209,210],{"class":177},"  background-color",[126,212,181],{"class":132},[126,214,215],{"class":177},"red",[126,217,191],{"class":132},[126,219,221],{"class":128,"line":220},5,[126,222,223],{"class":132},"}\n",[126,225,227,230],{"class":128,"line":226},6,[126,228,229],{"class":140},".aspect-ratio.aspect-ratio--4x3",[126,231,171],{"class":132},[126,233,235,238,240,243,245],{"class":128,"line":234},7,[126,236,237],{"class":177},"  padding-bottom",[126,239,181],{"class":132},[126,241,242],{"class":177},"75",[126,244,188],{"class":187},[126,246,191],{"class":132},[126,248,250],{"class":128,"line":249},8,[126,251,223],{"class":132},[98,253,255],{"id":254},"andere-aspect-ratio","Andere aspect ratio",[117,257,259],{"className":159,"code":258,"language":161,"meta":122,"style":122},".aspect-ratio.aspect-ratio--4x1 {\n  padding-bottom: 25%;\n}\n.aspect-ratio.aspect-ratio--4x2 {\n  padding-bottom: 50%;\n}\n.aspect-ratio.aspect-ratio--4x6 {\n  padding-bottom: 150%;\n}\n",[81,260,261,268,281,285,292,305,309,316,329],{"__ignoreMap":122},[126,262,263,266],{"class":128,"line":129},[126,264,265],{"class":140},".aspect-ratio.aspect-ratio--4x1",[126,267,171],{"class":132},[126,269,270,272,274,277,279],{"class":128,"line":174},[126,271,237],{"class":177},[126,273,181],{"class":132},[126,275,276],{"class":177},"25",[126,278,188],{"class":187},[126,280,191],{"class":132},[126,282,283],{"class":128,"line":194},[126,284,223],{"class":132},[126,286,287,290],{"class":128,"line":207},[126,288,289],{"class":140},".aspect-ratio.aspect-ratio--4x2",[126,291,171],{"class":132},[126,293,294,296,298,301,303],{"class":128,"line":220},[126,295,237],{"class":177},[126,297,181],{"class":132},[126,299,300],{"class":177},"50",[126,302,188],{"class":187},[126,304,191],{"class":132},[126,306,307],{"class":128,"line":226},[126,308,223],{"class":132},[126,310,311,314],{"class":128,"line":234},[126,312,313],{"class":140},".aspect-ratio.aspect-ratio--4x6",[126,315,171],{"class":132},[126,317,318,320,322,325,327],{"class":128,"line":249},[126,319,237],{"class":177},[126,321,181],{"class":132},[126,323,324],{"class":177},"150",[126,326,188],{"class":187},[126,328,191],{"class":132},[126,330,332],{"class":128,"line":331},9,[126,333,223],{"class":132},[335,336,337],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}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 pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":122,"searchDepth":174,"depth":174,"links":339},[340,341],{"id":100,"depth":174,"text":101},{"id":254,"depth":174,"text":255},"2017-04-18T11:00:00.000Z","md","\u002Fresponsive-aspect-ratio-in-css.png",{},true,{"title":5,"description":6},"blog\u002F2017-04-18-responsive-aspect-ratio-in-css",[9],"GlvmrepYu8muYmdmyS5HU5BHMtBInC9VKKFJx-Uwdy0",1780848345667]