31:[] 2f:{"title":"Aspect Ratio comparison","cells":[{"id":0,"value":"md`# Aspect Ratio comparison\nwhen fitting together two different aspect ratios, some amount of cropping will happen.\n\nThis attempts to show how much of it is lost, for different combinations of aspect ratios.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof viewport = select({placeholder: \"viewport\", title: \"viewport\", value:'4:3', options:aspects.map(o=>o.title)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof boxTitle = select({placeholder: \"image\", title: \"image-crop\", value:'3:2', options:aspects.map(o=>o.title)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"{\n let viewAspect=aspects.find(o=>o.title===viewport).ratio\n let view={\n h:300,\n w: 300*viewAspect\n }\n let boxAspect=aspects.find(o=>o.title===boxTitle).ratio\n let box={\n h: 300,\n w: 300 * boxAspect\n }\n let diffAbs=Math.abs(box.w - view.w)\n let diff=diffAbs / box.w\n diff=parseInt(diff*100,10)\n\n return html`

\n ${boxAspect} object
\n fit into a ${viewAspect} viewport \n

${diff}% of image missing

${boxTitle}

\n\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"aspects=[\n {\n title: '1:1',\n description: 'instagram',\n ratio: 1\n },\n {\n title: '4:3',\n description: 'all smartphones',\n ratio: 1.33\n },\n {\n title: 'A4 paper',\n description: '√2:1 (Lichtenberg ratio)',\n ratio: 1.41 \n },\n {\n title: '3:2',\n description: 'DSLR photos, linkedin',\n ratio: 1.5\n },\n {\n title: 'business card',\n description: '85.60 × 53.98 mm',\n ratio: 1.58577\n },\n {\n title: 'golden ratio',\n description: '1.6180339...',\n ratio: 1.6180\n },\n {\n title: '16:9',\n description: 'youtube, hdtv',\n ratio: 1.78,\n },\n {\n title: 'widescreen',\n description: 'fancy tv screens, movie-theatres',\n ratio: 1.85,\n },\n {\n title: 'facebook',\n description: '',\n ratio: 1.88,\n },\n {\n title: '1:2',\n description: 'twitter, some modern phones',\n ratio: 2,\n },\n {\n title: '\\'Cinemascope\\'',\n description: 'some modern movie-theatres',\n ratio: 2.35\n },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}