{"id":1500,"date":"2017-04-03T00:04:58","date_gmt":"2017-04-02T22:04:58","guid":{"rendered":"https:\/\/vielhuber.de\/?p=1500"},"modified":"2017-05-24T19:34:20","modified_gmt":"2017-05-24T17:34:20","slug":"harmonische-darstellung-von-logos-mit-javascript","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/","title":{"rendered":"Harmonische Darstellung von Logos mit JavaScript"},"content":{"rendered":"<p>Ob Referenzen, Partner oder Kunden \u2013 es gibt viele F\u00e4lle, in denen man mehrere Logos nebeneinander harmonisch darstellen will. Dabei sind die Gr\u00f6\u00dfenverh\u00e4ltnisse der Logos meistens uneinheitlich. Oft\u00a0folgt man hier bei der Gr\u00f6\u00dfendarstellung im Design seinem Bauchgef\u00fchl, doch es gibt auch eine exakte Berechnungsmethode einer optisch ansprechenden\u00a0Darstellung, indem man die Fl\u00e4chen der Logos gleichsetzt. In folgendem Beispiel gelingt das mit wenigen Zeilen JavaScript.<\/p>\n<p><!--more--><\/p>\n<p>Setzt man die H\u00f6he gleich, erh\u00e4lt man folgendes Aussehen:<\/p>\n<p class=\"codepen\" data-height=\"420\" data-theme-id=\"light\" data-slug-hash=\"LWqBBo\" data-default-tab=\"result\" data-user=\"vielhuber\" data-embed-version=\"2\">CodePen<\/p>\n<p>Macht man dasselbe Verfahren mit der Breite, ergibt sich folgende Darstellung:<\/p>\n<p class=\"codepen\" data-height=\"420\" data-theme-id=\"light\" data-slug-hash=\"mWvjje\" data-default-tab=\"result\" data-user=\"vielhuber\" data-embed-version=\"2\">CodePen<\/p>\n<p>Besser ist die Gleichsetzung der Fl\u00e4che unter Zuhilfenahme weniger Zeilen JavaScript:<\/p>\n<p class=\"githubgist\" data-gist-file=\"script.js\">1dacb229fcfb428ee3cb6b414625be29<\/p>\n<p>Damit ergibt sich folgendes Bild:<\/p>\n<p class=\"codepen\" data-height=\"490\" data-theme-id=\"light\" data-slug-hash=\"PpVBdz\" data-default-tab=\"result\" data-user=\"vielhuber\" data-embed-version=\"2\">CodePen<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ob Referenzen, Partner oder Kunden \u2013 es gibt viele F\u00e4lle, in denen man mehrere Logos nebeneinander harmonisch darstellen will. Dabei sind die Gr\u00f6\u00dfenverh\u00e4ltnisse der Logos meistens uneinheitlich. Oft\u00a0folgt man hier bei der Gr\u00f6\u00dfendarstellung im Design seinem Bauchgef\u00fchl, doch es gibt auch eine exakte Berechnungsmethode einer optisch ansprechenden\u00a0Darstellung, indem man die Fl\u00e4chen der Logos gleichsetzt. In [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-1500","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Harmonische Darstellung von Logos mit JavaScript<\/title>\n<meta name=\"description\" content=\"Ob Referenzen, Partner oder Kunden \u2013 es gibt viele F\u00e4lle, in denen man mehrere Logos nebeneinander harmonisch darstellen will.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Harmonische Darstellung von Logos mit JavaScript\" \/>\n<meta property=\"og:description\" content=\"Ob Referenzen, Partner oder Kunden \u2013 es gibt viele F\u00e4lle, in denen man mehrere Logos nebeneinander harmonisch darstellen will.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-02T22:04:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-24T17:34:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/harmonische-darstellung-von-logos-mit-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/harmonische-darstellung-von-logos-mit-javascript\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Harmonische Darstellung von Logos mit JavaScript\",\"datePublished\":\"2017-04-02T22:04:58+00:00\",\"dateModified\":\"2017-05-24T17:34:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/harmonische-darstellung-von-logos-mit-javascript\\\/\"},\"wordCount\":124,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/harmonische-darstellung-von-logos-mit-javascript\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/harmonische-darstellung-von-logos-mit-javascript\\\/\",\"name\":\"Harmonische Darstellung von Logos mit JavaScript\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2017-04-02T22:04:58+00:00\",\"dateModified\":\"2017-05-24T17:34:20+00:00\",\"description\":\"Ob Referenzen, Partner oder Kunden \u2013 es gibt viele F\u00e4lle, in denen man mehrere Logos nebeneinander harmonisch darstellen will.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/harmonische-darstellung-von-logos-mit-javascript\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/harmonische-darstellung-von-logos-mit-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/harmonische-darstellung-von-logos-mit-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Harmonische Darstellung von Logos mit JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Harmonische Darstellung von Logos mit JavaScript","description":"Ob Referenzen, Partner oder Kunden \u2013 es gibt viele F\u00e4lle, in denen man mehrere Logos nebeneinander harmonisch darstellen will.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/","og_locale":"de_DE","og_type":"article","og_title":"Harmonische Darstellung von Logos mit JavaScript","og_description":"Ob Referenzen, Partner oder Kunden \u2013 es gibt viele F\u00e4lle, in denen man mehrere Logos nebeneinander harmonisch darstellen will.","og_url":"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/","og_site_name":"Vielhuber David","article_published_time":"2017-04-02T22:04:58+00:00","article_modified_time":"2017-05-24T17:34:20+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Harmonische Darstellung von Logos mit JavaScript","datePublished":"2017-04-02T22:04:58+00:00","dateModified":"2017-05-24T17:34:20+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/"},"wordCount":124,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/","url":"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/","name":"Harmonische Darstellung von Logos mit JavaScript","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2017-04-02T22:04:58+00:00","dateModified":"2017-05-24T17:34:20+00:00","description":"Ob Referenzen, Partner oder Kunden \u2013 es gibt viele F\u00e4lle, in denen man mehrere Logos nebeneinander harmonisch darstellen will.","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/harmonische-darstellung-von-logos-mit-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Harmonische Darstellung von Logos mit JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/posts\/1500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/comments?post=1500"}],"version-history":[{"count":12,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/posts\/1500\/revisions"}],"predecessor-version":[{"id":1513,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/posts\/1500\/revisions\/1513"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/media?parent=1500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/categories?post=1500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/tags?post=1500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}