img {max-width: 100%}

Ganz still und heimlich hat sich die Jahresuhr einmal um den Blog gedreht. Als ich im September 2014 mit dem Schreiben begonnen habe, hätte ich nicht gedacht, dass ich dem so lange treu bleiben würde. Knapp 50 Einträge haben den Blog seither bereichert. Mal mehr mal weniger Zeit konnte ich dem Schreiben widmen. Die Kamera hat endlich wieder mehr zu tun und ein routinierter Umgang mit den Bildern hat sich eingeschliffen. Aber auch der half lange nicht, dem Wunsch nach einem einheitlichen Aussehen auf dem Blog gerecht zu werden. Aber diese Woche habe ich endlich den gesuchten Code gefunden.

Obwohl ich seit einiger Zeit alle Bilder für den Blog mit einer Breite von 800px abspeichere, ist die Optik der Bilder meist nicht dieselbe. Abhängig von der Höhe werden die Bilder trotzdem nicht gleich angezeigt. Kein Drama - aber es war mir ein Dorn im Auge.

Im Hinblick auf die Nutzung für Instagram habe ich dann begonnen, die Bilder quadratisch abzuspeichern. Das löste für die meisten Fälle mein Problem. Aber es lässt sich nun mal nicht jedes Bild auf ein Quadrat reduzieren. Hin und wieder gehen da schon mal schöne Details verloren. Bei einigen Blogs habe ich gesehen, dass die Bilder das komplette Format des Frames nutzen. Alle Bilder werden auf die Breite des Frames angepasst und die Höhe automatisch skaliert. Danach habe ich gesucht und diese Woche kam dann endlich die Erleuchtung.

Hier der CSS Code:

.post-body img 
{
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}

Und hier die Stelle, wo der Code bei Blogger hinterlegt werden und anschließend mit "auf den Blog anwenden" bestätigt werden muss.

Der Code besagt, dass die Größe des Bildes an Breite des Frames angepasst wird und zwar nur in dem Frame, in dem gepostet wird (der Schnipsel fehlte mir lange Zeit). Die Höhe wird automatisch skaliert. Zusätzlich ist in dem Code noch enthalten, das die Ränder um das Bild weggelassen werden. Für mein Problem nicht entscheidend, hat mir aber dennoch gut gefallen, so dass ich das gleich mit übernommen habe.

Wichtig ist nun noch (sonst klappt es nämlich nicht):

1. dass die Bilder grundsätzlich groß genug sind, um den kompletten Frame auszufüllen
2. dass bei den Bildern „Originalgröße“ eingestellt ist
3. dass die Position des Bildes auf „zentriert“ gestellt ist

Ich hoffe, ich habe verständlich erklärt, was ich meine. Ich bin kein Programmierer kann aber ein wenig den Code lesen. Was für den einen oder anderen simpel und selbstverständlich ist, muss ich mir suchend im Web erarbeiten. Ich freue mich über diesen kleinen Erfolg und hoffe auch dem einen oder anderen von Euch eine kleine Hilfe gewesen zu sein.

Eure Besuche und die vielen unglaublich lieben Kommentare des letzen Jahres sind mir ein Ansporn. Jeder einzelne zaubert mir auch nach mehrmaligen Lesen ein Lächeln ins Gesicht (auch wenn das auf manchen Bildern nicht immer so aussieht. ;-)

Im Antworten auf eurer Kommentare bin ich immer noch recht nachlässig. Zumindest auf Fragen habe ich mich bemüht zu antworten. Da möchte ich gern an mir arbeiten. Deshalb bin ich auf Euer Feedback gespannt: Wie haltet ihr es mit dem Antworten auf eurem Blog? Erwartet ihr eine Antwort auf eure hinterlassenen Kommentare in anderen Blogs - kehrt ihr also zu dem jeweiligen Post zurück? Ich freue mich auf eure Erfahrungsberichte.

Ich wünsch‘ Euch ein schönes Wochenende und allen Dresdner Mädels am Samstag viel Spaß beim Stoffmarkt.

Verlinkt bei Freutag.

Quelle:

http://helplogger.blogspot.de/2014/08/automatically-resize-blogger-images.html