{"id":642,"date":"2014-04-02T20:22:26","date_gmt":"2014-04-02T18:22:26","guid":{"rendered":"https:\/\/vielhuber.de\/?p=642"},"modified":"2017-10-07T00:48:38","modified_gmt":"2017-10-06T22:48:38","slug":"festes-seitenverhaeltnis-bei-responsiven-html-elementen","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/","title":{"rendered":"Festes Seitenverh\u00e4ltnis bei HTML-Elementen"},"content":{"rendered":"<p>Als Webentwickler kommt man h\u00e4ufig in die Verlegenheit, mit HTML-Elementen zu arbeiten, die von sich aus \u2013beispielsweise im Gegensatz zum img-Element\u2013 weder eine feste Gr\u00f6\u00dfe noch ein festes Seitenverh\u00e4ltnis mitbringen. Oftmals will man erreichen, dass sich diese Objekte zwar responsiv verhalten, aber die Proportion zwischen Breite und H\u00f6he erhalten bleibt. CSS bietet hier standardm\u00e4\u00dfig keine intuitive L\u00f6sung an. Doch mit Hilfe von der vertikalen Padding-Eigenschaft kommt man ans Ziel.<\/p>\n<p><!--more--><\/p>\n<p>Nehmen wir das alltagstaugliche Beispiel quadratischer Artikelbilder, deren Grafiken jedoch nicht zwingend quadratisch vorliegen, wir sie jedoch gerne ohne zus\u00e4tzlichen Aufwand und vor allem ohne Verzerrung mit dem Seitenverh\u00e4ltnis 1:1 darstellen wollen, wobei sich ihre Breite (und damit auch H\u00f6he) jeweils responsiv ver\u00e4ndern soll. Mit folgendem Code ist es ganz leicht m\u00f6glich, ohne zus\u00e4tzliches Markup mit Hilfe von CSS dies zu realisieren:<\/p>\n<p class=\"githubgist\" data-gist-file=\"1.html\">1bc3a80de3db90cdf0535541236d95f2<\/p>\n<p>mit dem Ergebnis<\/p>\n<div style=\"background: papayawhip url('https:\/\/www.google.de\/images\/srpr\/logo11w.png') center \/ contain no-repeat; margin: 0 auto 15px; width: 10%; height: 0; padding-bottom: 10%;\">\u00a0<\/div>\n<p>Doch wieso funktioniert das und wie k\u00f6nnen andere Seitenverh\u00e4ltnisse erzeugt werden? Der Schl\u00fcssel dazu liegt in der Padding-Eigenschaft, die sich \u2013angegeben in prozentualen Werten\u2013 stets an demselben Grundwert wie die Width-Eigenschaft (n\u00e4mlich an der Breite des Elternelements) orientiert. Bei padding-left und padding-right ist dies einleuchtend, bei padding-top und padding-bottom verwunderlich, aber in diesem Fall sehr hilfreich.<\/p>\n<p>W\u00fcnscht man sich etwa ein Seitenverh\u00e4ltnis von 16:9, so w\u00e4hlt man beispielsweise die Werte width:100%;padding-bottom:56.25%;. Ein Seitenverh\u00e4ltnis, das dem goldenen Schnitt Rechnung tr\u00e4gt, ist mit den Werten width:100%;padding-bottom:61.81%; realisierbar.<\/p>\n<p>Mit Hilfe von <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/calc\" target=\"_blank\" rel=\"noopener\">calc<\/a>\u00a0kann man direkt das Seitenverh\u00e4ltnis angeben, so zum Beispiel f\u00fcr 16:9 mit padding-bottom:calc(1 \/ (16 \/ 9) * 100%). Besteht das Element aus weiteren, verschachtelten Elementen, positioniert man das Child-Element absolut, um das Padding des Elternelements auszugleichen:<\/p>\n<p class=\"githubgist\" data-gist-file=\"2.html\">1bc3a80de3db90cdf0535541236d95f2<\/p>\n<p>Das f\u00fchrt zu folgendem Ergebnis:<\/p>\n<div class=\"parent\" style=\"background-color: chartreuse;margin:0 auto; width: 50%; height: 0; padding-bottom: calc(1 \/ (16 \/ 9) * 50%); position: relative;\">\n<div class=\"child\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\">...<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Als Webentwickler kommt man h\u00e4ufig in die Verlegenheit, mit HTML-Elementen zu arbeiten, die von sich aus \u2013beispielsweise im Gegensatz zum img-Element\u2013 weder eine feste Gr\u00f6\u00dfe noch ein festes Seitenverh\u00e4ltnis mitbringen. Oftmals will man erreichen, dass sich diese Objekte zwar responsiv verhalten, aber die Proportion zwischen Breite und H\u00f6he erhalten bleibt. CSS bietet hier standardm\u00e4\u00dfig keine [&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-642","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Festes Seitenverh\u00e4ltnis bei HTML-Elementen &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Als Webentwickler kommt man h\u00e4ufig in die Verlegenheit, mit HTML-Elementen zu arbeiten, die von sich aus \u2013beispielsweise im Gegensatz zum img-Eleme...\" \/>\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\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Festes Seitenverh\u00e4ltnis bei HTML-Elementen &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Als Webentwickler kommt man h\u00e4ufig in die Verlegenheit, mit HTML-Elementen zu arbeiten, die von sich aus \u2013beispielsweise im Gegensatz zum img-Element\u2013\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-02T18:22:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-06T22:48:38+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\\\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Festes Seitenverh\u00e4ltnis bei HTML-Elementen\",\"datePublished\":\"2014-04-02T18:22:26+00:00\",\"dateModified\":\"2017-10-06T22:48:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\\\/\"},\"wordCount\":302,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\\\/\",\"name\":\"Festes Seitenverh\u00e4ltnis bei HTML-Elementen &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2014-04-02T18:22:26+00:00\",\"dateModified\":\"2017-10-06T22:48:38+00:00\",\"description\":\"Als Webentwickler kommt man h\u00e4ufig in die Verlegenheit, mit HTML-Elementen zu arbeiten, die von sich aus \u2013beispielsweise im Gegensatz zum img-Element\u2013\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Festes Seitenverh\u00e4ltnis bei HTML-Elementen\"}]},{\"@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":"Festes Seitenverh\u00e4ltnis bei HTML-Elementen &#060; Vielhuber David","description":"Als Webentwickler kommt man h\u00e4ufig in die Verlegenheit, mit HTML-Elementen zu arbeiten, die von sich aus \u2013beispielsweise im Gegensatz zum img-Eleme...","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\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/","og_locale":"de_DE","og_type":"article","og_title":"Festes Seitenverh\u00e4ltnis bei HTML-Elementen &#060; Vielhuber David","og_description":"Als Webentwickler kommt man h\u00e4ufig in die Verlegenheit, mit HTML-Elementen zu arbeiten, die von sich aus \u2013beispielsweise im Gegensatz zum img-Element\u2013","og_url":"https:\/\/vielhuber.de\/blog\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/","og_site_name":"Vielhuber David","article_published_time":"2014-04-02T18:22:26+00:00","article_modified_time":"2017-10-06T22:48:38+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\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Festes Seitenverh\u00e4ltnis bei HTML-Elementen","datePublished":"2014-04-02T18:22:26+00:00","dateModified":"2017-10-06T22:48:38+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/"},"wordCount":302,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/","url":"https:\/\/vielhuber.de\/blog\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/","name":"Festes Seitenverh\u00e4ltnis bei HTML-Elementen &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2014-04-02T18:22:26+00:00","dateModified":"2017-10-06T22:48:38+00:00","description":"Als Webentwickler kommt man h\u00e4ufig in die Verlegenheit, mit HTML-Elementen zu arbeiten, die von sich aus \u2013beispielsweise im Gegensatz zum img-Element\u2013","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/festes-seitenverhaeltnis-bei-responsiven-html-elementen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Festes Seitenverh\u00e4ltnis bei HTML-Elementen"}]},{"@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\/haw\/wp-json\/wp\/v2\/posts\/642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/comments?post=642"}],"version-history":[{"count":8,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/posts\/642\/revisions"}],"predecessor-version":[{"id":1742,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/posts\/642\/revisions\/1742"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/media?parent=642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/categories?post=642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/tags?post=642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}