{"id":903,"date":"2013-08-22T09:15:40","date_gmt":"2013-08-22T07:15:40","guid":{"rendered":"http:\/\/demo.marketpress.com\/hamburg-de\/?p=903"},"modified":"2013-08-22T09:15:40","modified_gmt":"2013-08-22T07:15:40","slug":"viele-bunte-bilder","status":"publish","type":"post","link":"https:\/\/rotary-family-shop.de\/index.php\/2013\/08\/22\/viele-bunte-bilder\/","title":{"rendered":"Viele bunte Bilder"},"content":{"rendered":"<p>Bildpositionierung \u2013 Ebbe und Flut im W\u00f6rtermeer. Am besten lassen sich die verschiedenen Flie\u00dfrichtungen von Text um Bilder demonstrieren, wenn man sie direkt vor Augen hat. Schnapp\u2019 dir ein Paddel, los geht\u2019s!<\/p>\n<p>In WordPress stehen dir folgende <em>Bildausrichtungen<\/em> zur Verf\u00fcgung:<\/p>\n<ul>\n<li>Links<\/li>\n<li>Zentriert<\/li>\n<li>Rechts<\/li>\n<li>Keine<\/li>\n<\/ul>\n<p>Als Standard-<em>Bildgr\u00f6\u00dfen<\/em> hast du zur Auswahl:<\/p>\n<ul>\n<li>Miniaturbild<\/li>\n<li>Mittelgro\u00df<\/li>\n<li>Gro\u00df<\/li>\n<li>Vollst\u00e4ndige Gr\u00f6\u00dfe<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h3>Bildpositionierung<\/h3>\n<p><a href=\"http:\/\/family.ko-werbemittel.de\/shop\/wp-content\/uploads\/2013\/08\/img_2380.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1426\" alt=\"img_2380\" src=\"http:\/\/family.ko-werbemittel.de\/shop\/wp-content\/uploads\/2013\/08\/img_2380-300x199.jpg\" width=\"300\" height=\"199\" \/><\/a><\/p>\n<p>Das Bild \u00fcber dieser Zeile ist <strong><em>zentriert<\/em><\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-1427\" alt=\"img_2381\" src=\"http:\/\/family.ko-werbemittel.de\/shop\/wp-content\/uploads\/2013\/08\/img_2381-150x150.jpg\" width=\"150\" height=\"150\" srcset=\"https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2381-150x150.jpg 150w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2381-250x250.jpg 250w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2381-100x100.jpg 100w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2381-300x300.jpg 300w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/>Der Rest des folgenden Absatzes ist nur ein Platzhalter, um zu zeigen, wie der Text um ein 150&#215;150 Pixel gro\u00dfes Bild flie\u00dft, das <strong><em>linksb\u00fcndig<\/em><\/strong> ist.<\/p>\n<p>Das Bild sollte einen Abstand nach oben, rechts und unten aufweisen. Der Text flie\u00dft nicht in das Bild, sondern umflie\u00dft es. Bilder brauchen Raum zum Atmen. Sie m\u00fcssen ihre Aufgabe erf\u00fcllen k\u00f6nnen, ohne dabei vom Text eingeengt zu werden.<\/p>\n<p>Gleich sehen wir, wie der Text von der rechten Seite des Bildes nach unten flie\u00dft und unter dem Bild einfach weiter geht \u2013 sofern uns hier beim Schreiben nicht die Puste ausgeht, bis es endlich so weit ist. Aha! Da sind wir.<\/p>\n<p>Und nun ein richtig gro\u00dfes Bild. Es hat <strong><em>keine<\/em><\/strong> Ausrichtung.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1422\" alt=\"img_2351\" src=\"http:\/\/family.ko-werbemittel.de\/shop\/wp-content\/uploads\/2013\/08\/img_2351.jpg\" width=\"1400\" height=\"933\" srcset=\"https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351.jpg 1400w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-350x233.jpg 350w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-300x200.jpg 300w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-768x512.jpg 768w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-1024x682.jpg 1024w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-600x400.jpg 600w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-745x496.jpg 745w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p>Dieses Bild ist 1400 Pixel breit und bleibt dennoch innerhalb der Grenzen des Inhalts.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-1428\" alt=\"img_2382\" src=\"http:\/\/family.ko-werbemittel.de\/shop\/wp-content\/uploads\/2013\/08\/img_2382-200x300.jpg\" width=\"200\" height=\"300\" srcset=\"https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-200x300.jpg 200w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-350x525.jpg 350w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-768x1152.jpg 768w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-683x1024.jpg 683w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-600x900.jpg 600w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-745x1118.jpg 745w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382.jpg 1400w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/p>\n<p>Jetzt schauen wir mal nach rechts. Das ist ein Hochformat, die muss es auch geben, und es ist <strong><em>rechtsb\u00fcndig<\/em><\/strong> ausgerichtet.<\/p>\n<p>Wiederum schreiben wir hier einfach weiter, bis der Text unter dem Bild umbricht. Allerdings wird das wohl eine Weile dauern, das Bild ist n\u00e4mlich ein ganz sch\u00f6n hohes Hochformat. Ein Kailash von einem Hochformat nahezu.<\/p>\n<p>Hmm. Es ist wirklich hoch.<\/p>\n<p>Ob der Text irgendwann umbricht? \u00dcbrigens, wenn wir hier von Umbr\u00fcchen sprechen, gehen wir davon aus (vergib uns bitte), dass du diese Seite in voller Breite siehst \u2013 also auf einem Bildschirm von mindestens 1024 Pixeln Breite.<\/p>\n<p>Nat\u00fcrlich kannst du auch einen kleineren Bildschirm benutzen, jederzeit! Nur das mit Umbr\u00fcchen wird sich dann anders verhalten und der Text hier eventuell keinen Sinn f\u00fcr dich ergeben, weil ein Umbruch an einer v\u00f6llig anderen Stelle geschieht als erwartet \u2013 n\u00e4mlich hier, wo dieser Marathon von Absatz nun zu Ende geht.<\/p>\n<h3>Bildunterschriften<\/h3>\n<p>Der Einfachheit halber kopieren wir mal denselben Text und die gleichen Bilder hier hinein, nur dass wir zu den Bildern ein paar Unterschriften hinzuf\u00fcgen. Und los!<\/p>\n<figure id=\"attachment_1426\" aria-describedby=\"caption-attachment-1426\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/family.ko-werbemittel.de\/shop\/wp-content\/uploads\/2013\/08\/img_2380.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1426\" alt=\"Strandbar (dies ist ein Alternativtext)\" src=\"http:\/\/family.ko-werbemittel.de\/shop\/wp-content\/uploads\/2013\/08\/img_2380-300x199.jpg\" width=\"300\" height=\"199\" \/><\/a><figcaption id=\"caption-attachment-1426\" class=\"wp-caption-text\">Strandbar (dies ist eine Bildunterschrift)<\/figcaption><\/figure>\n<p>Das Bild \u00fcber dieser Zeile ist <strong><em>zentriert<\/em><\/strong>.<\/p>\n<figure id=\"attachment_1427\" aria-describedby=\"caption-attachment-1427\" style=\"width: 150px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" class=\"size-thumbnail wp-image-1427\" alt=\"img_2381\" src=\"http:\/\/family.ko-werbemittel.de\/shop\/wp-content\/uploads\/2013\/08\/img_2381-150x150.jpg\" width=\"150\" height=\"150\" srcset=\"https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2381-150x150.jpg 150w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2381-250x250.jpg 250w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2381-100x100.jpg 100w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2381-300x300.jpg 300w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><figcaption id=\"caption-attachment-1427\" class=\"wp-caption-text\">Bildunterschrift linksb\u00fcndig<\/figcaption><\/figure>\n<p>Der Rest des folgenden Absatzes ist nur ein Platzhalter, um zu zeigen, wie der Text um ein 150&#215;150 Pixel gro\u00dfes Bild flie\u00dft, das <strong><em>linksb\u00fcndig<\/em><\/strong> ist.<\/p>\n<p>Das Bild sollte einen Abstand nach oben, rechts und unten aufweisen. Der Text flie\u00dft nicht in das Bild, sondern umflie\u00dft es. Bilder brauchen Raum zum Atmen. Sie m\u00fcssen ihre Aufgabe erf\u00fcllen k\u00f6nnen, ohne dabei vom Text eingeengt zu werden.<\/p>\n<p>Gleich sehen wir, wie der Text von der rechten Seite des Bildes nach unten flie\u00dft und unter dem Bild einfach weiter geht \u2013 sofern uns hier beim Schreiben nicht die Puste ausgeht, bis es endlich so weit ist. Aha! Da sind wir.<\/p>\n<p>Und nun ein richtig gro\u00dfes Bild. Es hat <strong><em>keine<\/em><\/strong> Ausrichtung.<\/p>\n<figure id=\"attachment_1422\" aria-describedby=\"caption-attachment-1422\" style=\"width: 1400px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1422\" alt=\"img_2351\" src=\"http:\/\/family.ko-werbemittel.de\/shop\/wp-content\/uploads\/2013\/08\/img_2351.jpg\" width=\"1400\" height=\"933\" srcset=\"https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351.jpg 1400w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-350x233.jpg 350w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-300x200.jpg 300w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-768x512.jpg 768w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-1024x682.jpg 1024w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-600x400.jpg 600w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2351-745x496.jpg 745w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-1422\" class=\"wp-caption-text\">Eine weitere Bildunterschrift, diesmal vielleicht etwas l\u00e4nger? Man m\u00f6chte ja mal sehen, was passiert, wenn die Unterschrift umbricht. Geht da alles klar? Scheint so.<\/figcaption><\/figure>\n<p>Dieses Bild ist 1400 Pixel breit und bleibt dennoch innerhalb der Grenzen des Inhalts.<\/p>\n<figure id=\"attachment_1428\" aria-describedby=\"caption-attachment-1428\" style=\"width: 200px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1428\" alt=\"img_2382\" src=\"http:\/\/family.ko-werbemittel.de\/shop\/wp-content\/uploads\/2013\/08\/img_2382-200x300.jpg\" width=\"200\" height=\"300\" srcset=\"https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-200x300.jpg 200w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-350x525.jpg 350w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-768x1152.jpg 768w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-683x1024.jpg 683w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-600x900.jpg 600w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382-745x1118.jpg 745w, https:\/\/rotary-family-shop.de\/wp-content\/uploads\/2013\/08\/img_2382.jpg 1400w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><figcaption id=\"caption-attachment-1428\" class=\"wp-caption-text\">Bildunterschrift rechtsb\u00fcndig<\/figcaption><\/figure>\n<p>Jetzt schauen wir mal nach rechts. Das ist ein Hochformat, die muss es auch geben, und es ist <strong><em>rechtsb\u00fcndig<\/em><\/strong> ausgerichtet.<\/p>\n<p>Wiederum schreiben wir hier einfach weiter, bis der Text unter dem Bild umbricht. Allerdings wird das wohl eine Weile dauern, das Bild ist n\u00e4mlich ein ganz sch\u00f6n hohes Hochformat. Ein Kailash von einem Hochformat nahezu.<\/p>\n<p>Hmm. Es ist wirklich hoch.<\/p>\n<p>Ob der Text irgendwann umbricht? \u00dcbrigens, wenn wir hier von Umbr\u00fcchen sprechen, gehen wir davon aus (vergib uns bitte), dass du diese Seite in voller Breite siehst \u2013 also auf einem Bildschirm von mindestens 1024 Pixeln Breite.<\/p>\n<p>Nat\u00fcrlich kannst du auch einen kleineren Bildschirm benutzen, jederzeit! Nur das mit Umbr\u00fcchen wird sich dann anders verhalten und der Text hier eventuell keinen Sinn f\u00fcr dich ergeben, weil ein Umbruch an einer v\u00f6llig anderen Stelle geschieht als erwartet \u2013 n\u00e4mlich hier, wo dieser Marathon von Absatz nun zu Ende geht.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bildpositionierung \u2013 Ebbe und Flut im W\u00f6rtermeer. Am besten lassen sich die verschiedenen Flie\u00dfrichtungen von Text um Bilder demonstrieren, wenn man sie direkt vor Augen hat. Schnapp\u2019 dir ein Paddel, los geht\u2019s! In WordPress stehen dir folgende Bildausrichtungen zur Verf\u00fcgung: Links Zentriert Rechts Keine Als Standard-Bildgr\u00f6\u00dfen hast du zur Auswahl: Miniaturbild Mittelgro\u00df Gro\u00df Vollst\u00e4ndige Gr\u00f6\u00dfe<\/p>\n","protected":false},"author":1,"featured_media":1426,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein"],"_links":{"self":[{"href":"https:\/\/rotary-family-shop.de\/index.php\/wp-json\/wp\/v2\/posts\/903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rotary-family-shop.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rotary-family-shop.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rotary-family-shop.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rotary-family-shop.de\/index.php\/wp-json\/wp\/v2\/comments?post=903"}],"version-history":[{"count":0,"href":"https:\/\/rotary-family-shop.de\/index.php\/wp-json\/wp\/v2\/posts\/903\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rotary-family-shop.de\/index.php\/wp-json\/wp\/v2\/media\/1426"}],"wp:attachment":[{"href":"https:\/\/rotary-family-shop.de\/index.php\/wp-json\/wp\/v2\/media?parent=903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rotary-family-shop.de\/index.php\/wp-json\/wp\/v2\/categories?post=903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rotary-family-shop.de\/index.php\/wp-json\/wp\/v2\/tags?post=903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}