4. Januar 2018

Bildgröße im Blog anpassen

Baut man ein Bild in den Blog ein – was sich sehr empfiehlt! – so erscheint es zunächst einmal wie dieses hier oben: in der Mitte und in der Standardgröße, hier 240 Pixel breit × 320 Pixel hoch. 
Klickt man’s (als Bloggender!) an, so bekommt man ein blaues Menü wie hier und kann das Bild nach links oder rechts rücken; der Text läuft dann (drumher)um. 
   Als Größen bieten sich an: Klein, Mittel (standard), Groß, X-Large und Originalgröße. Da kann man schnell probieren, wie’s am besten gefällt, hier rechts zum Beispiel klein.
   Wenn man nun aber das Bild in einer ganz bestimmten Größe haben möchte, oft der ganzen Spaltenbreite, so muss man ans Eingemachte gehen, das heißt von »Verfassen« auf »HTML« übergehen. Keine Angst, das geht alles einfach.
   Das Bild oben zeigt sich im HTML-Kode so:

‹div class="separator" style="clear: both; text-align: center;"›
‹span style="font-size: large;"›‹a href="https://4.bp.blogspot.com/-pZz4Mq2Ej7k/Wk4H5npAi7I/AAAAAAAB_94/Gq-gKuCHvDw6ii2dW5S6mUXEgdWUQqdCwCLcBGAs/s1600/P1900923.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"›‹img border="0" data-original-height="1600" data-original-width="1200" height="320" src="https://4.bp.blogspot.com/-pZz4Mq2Ej7k/Wk4H5npAi7I/AAAAAAAB_94/Gq-gKuCHvDw6ii2dW5S6mUXEgdWUQqdCwCLcBGAs/s320/P1900923.JPG" width="240" /›‹/a›‹/span›‹/div›

 
(Die Hackerl habe ich, damit hier das Blog-Programm nicht durcheinanderkommt, in ›kleine Haken‹ umgewandelt.)
• Die Zeile mit "separator" ist nur eine unsichtbare Trennung des textflusses vor dem Bild.
• Das ‹a href=…› bestimmt, was beim Anklicken des Bildes passieren soll: Das Originalbild soll sich zeigen, in voller Größe.
Ab ‹img … wird’s für uns interessant. Da finden Sie (von mir angefettet) ein height="320" und später ein width="240", also Höhe und Breite der erstmaligen Darstellung in Pixeln. Wenn Sie sich den HTML-Kode von Ihrem Browser zeigen lassen, so sehen Sie’s immer noch, auch als bloß Abrufende.
   Diese beiden Angaben müssen Sie proportional verändern, um die Bildgröße pixelgenau anzupassen. Ich nehme hier einmal als Beispiel die dreifache Größe: Höhe 3×320=960 und Breite 3×240=720. Beliebige Skalierungen sind möglich (mit etwas Dreisatzrechnung …). Mal sehen, was passiert:
Nach der Änderung im HTML-Kode geht man einfach wieder auf »Verfassen« und sieht das Ergebnis, bittesehr. Danach n dem Fall noch linksgerückt.

Silbentrennung. Wenn Ihnen der Zeilenfall, besonders im Text neben Bildern, nicht gefällt, etwa hier im Screenshot – 



– so mag man mitten in die Wörter als mögliche Sil­ben­trenn­stelle ein ­ einfügen, einen “soft hy­phen”, bedingten Trennstrich. Schon trennt der emp­fan­gen­de Browser an dieser Stelle wenn nötig das Wort. Ich hab’s mal hier in diesem Absatz gezeigt und am folgenden Zitat von oben:
   Wenn man nun aber das Bild in einer ganz be­stimm­ten Größe haben möchte, meistens der ganzen Spal­ten­brei­te, so muss man ans Eingemachte gehen, …
   Ich hoffe, Ihr Browser macht brav mit!

Permalink hierher:
 https://blogabissl.blogspot.com/2018/01/bildgroe-im-blog-anpassen.html

1 Kommentar:

andi-amo hat gesagt…

Hallo Fritz,
das passt jetzt zwar nicht wirklich zu diesem Post. Aber darf ich trotzdem eine Frage stellen? Ich suche mich nämlich dumm und dusselig im Netz und kann nirgends eine Antwort finden.
Ich hatte vor langem mal IRGENDWO gelesen, dass die Bilder, die man auf blogspot postet nicht größer als 799 Punkte sein sollen. - Alles was größer ist zählt zum Speicher und der wäre dann irgendwann mal voll?
Ich habe mich jetzt all die Jahre immer dran gehalten. - Aber ich kann nirgendwo nachlesen, ob dem tatsächlich so ist.
Praktisch wäre nämlich eine größere Bildgröße, die gleichzeitig auch die optimale Größe für Instagram hätte, also z. B. 1080 x 1080 oder 1080 x 1350. - Aber ich trau mich nicht, weil ich immer besagte Regel im Hinterkopf habe.
Kennst Du Dich zu diesem Thema zufällig aus?
Liebe Grüße, Andrea