{"id":87,"date":"2018-03-18T16:02:24","date_gmt":"2018-03-18T15:02:24","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=87"},"modified":"2018-03-18T16:02:24","modified_gmt":"2018-03-18T15:02:24","slug":"bilder-und-videos-responsive","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/87\/bilder-und-videos-responsive\/","title":{"rendered":"Bilder und Videos Responsive"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/87\/bilder-und-videos-responsive\/#Bilder\" >Bilder<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/87\/bilder-und-videos-responsive\/#Videos\" >Videos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/87\/bilder-und-videos-responsive\/#Das_Ergebnis\" >Das Ergebnis<\/a><\/li><\/ul><\/nav><\/div>\n<p>Ein Problem bei responsiven Webseiten sind Elemente wie Bilder und Videos. Diese haben eine feste Gr\u00f6\u00dfe. Idealerweise werden diese in Originalaufl\u00f6sung dargestellt.<\/p>\n<p><!--more--><\/p>\n<p>Bei mobilen Ger\u00e4ten reicht dieser Platz oft nicht aus:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/img_resp_1.png\" alt=\"\" width=\"338\" height=\"558\" class=\"alignnone size-full wp-image-88\" srcset=\"\/wp-content\/uploads\/2018\/03\/img_resp_1.png 338w, \/wp-content\/uploads\/2018\/03\/img_resp_1-182x300.png 182w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/p>\n<p>Dies sieht unsch\u00f6n aus und Google meckert dar\u00fcber auch. Daher w\u00e4re die optimale L\u00f6sung, dass das Bild in der Originalgr\u00f6\u00dfe dargestellt wird, wenn gen\u00fcgend Platz zur Verf\u00fcgung steht. Ist dies nicht der Fall, soll das Bild entsprechend verkleinert dargestellt werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bilder\"><\/span>Bilder<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr Bilder l\u00e4sst sich dies mit folgendem CSS-Code realisieren:<\/p>\n<pre>\r\nimg { \r\n\tmax-width: 100%; \r\n\tdisplay:block; \r\n\theight: auto; \r\n}\r\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Videos\"><\/span>Videos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Auch f\u00fcr Videos l\u00e4sst sich das responsiv realisieren:<\/p>\n<pre>\r\nvideo { \r\n  width: 100%    !important;\r\n  height: auto   !important;\r\n}\r\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Das_Ergebnis\"><\/span>Das Ergebnis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das Ergebnis sieht dann so aus:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/img_resp_2.png\" alt=\"\" width=\"309\" height=\"543\" class=\"alignnone size-full wp-image-89\" srcset=\"\/wp-content\/uploads\/2018\/03\/img_resp_2.png 309w, \/wp-content\/uploads\/2018\/03\/img_resp_2-171x300.png 171w\" sizes=\"auto, (max-width: 309px) 100vw, 309px\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Ein Problem bei responsiven Webseiten sind Elemente wie Bilder und Videos. Diese haben eine feste Gr\u00f6\u00dfe. Idealerweise werden diese in<\/p>\n","protected":false},"author":1,"featured_media":92,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[22,19],"class_list":["post-87","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-css","tag-grafik"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/92"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}