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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6QUnBbbrFlNXv7shQbE8mDywytYztMrxUbcdnT7mQP6emccvei47FKLcblgOXdMuJAwe6-KQJJyMBpD-hULaOjinnKaus1g_b0dvs1SgT9POJfgqR4MP1IPk8hQNlhmvG8tqw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6QUnBbbrFlNXv7shQbE8mDywytYztMrxUbcdnT7mQP6emccvei47FKLcblgOXdMuJAwe6-KQJJyMBpD-hULaOjinnKaus1g_b0dvs1SgT9POJfgqR4MP1IPk8hQNlhmvG8tqw/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