Hong Cheung 
Achtung
Für diese Methode ist die Verwendung von .mdx erforderlich
Ich liebe es, meine Blogbeiträge in Markdown zu schreiben.
Allerdings ist das Anpassen von Bildern einer der wunden Punkte.
In diesem Artikel zeige ich Ihnen, wie Sie die Größe und Position Ihrer Bilder nach Ihren Wünschen anpassen können, indem Sie ein wenig HTML verwenden.
Keine Sorge, ich führe Sie Schritt für Schritt durch.
Das Problem
Die einzige Möglichkeit, Bilder in Ihren Markdown-Blogbeitrag einzufügen, ist diese:
Ergebnis:
Ich weiß, sie sieht süß aus, aber sie nimmt den ganzen Bildschirm ein! Was, wenn Sie sie in einer kleineren Größe möchten?
Größe ändern
Hier kann Ihnen ein wenig HTML dieses Problem abnehmen.
Instead of using , we use the following:<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px;" />Code-Erklärung:
Das src ist die Kurzform für die Quelle Ihres Katzenbildes.
Ein alt ist der Ort, an dem Sie dies einfügen - ! [Bildbeschreibung hier] ( Link )
Das style bestimmt, wie Sie die Darstellung Ihres Bildes ändern. Hier habe ich es so eingestellt, dass es eine maximale Breite von 400 Pixeln anzeigt - egal was passiert.
Ergebnis:
Sie können die max-width auf einen beliebigen Wert ändern.
Beachten Sie jedoch, dass ich hier max-height nicht geändert habe. Das liegt daran, dass ein Bild verzerrt werden könnte, wenn Sie eine feste Breite und Höhe festlegen, und das wollen Sie nicht.
Bevorzugen Sie also entweder max-width oder max-height für Ihr Bild, um das richtige Seitenverhältnis beizubehalten.
Position
Möglicherweise möchten Sie Ihr Bild auch zentrieren, statt es standardmäßig am linken Rand auszurichten.
Das können Sie erreichen, indem Sie ‘margin: auto;’ nach ‘max-with: 400px;’ hinzufügen.
Code:
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />Ergebnis:
Großartig! Jetzt kennen Sie die grundlegende Methode, um die Größe Ihrer Bilder in Ihrem Blogbeitrag zu ändern.
Jetzt möchte ich Ihnen eine andere Methode zeigen, die dasselbe Ergebnis erzielt, aber wohl besser ist.
Schauen wir uns meine bevorzugte Art an, Bilder in Markdown anzupassen.
Meine bevorzugte Methode
Code:
<div style="max-width: 400px; margin: auto"> </div>Ergebnis:
Wie Sie sehen, ist das Ergebnis dasselbe wie oben! Aber der Code wirkt sauberer. Noch wichtiger: Sie können weiterhin die Standardmethode zum Einfügen Ihres Bildes verwenden:
Dann umschließen Sie es mit einem div (einem Container, in diesem Kontext für Ihr Bild)
<div style="max-width: 400px; margin: auto"></div>Erinnern Sie sich an das style=“max-width: 400px; margin: auto”, das wir in unserem img verwendet haben?
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />Wir übernehmen einfach die Stiländerung und wenden sie auf den Container an, der das Bild enthält.
<div style="max-width: 400px; margin: auto"> </div>So erhalten Sie die Vorteile beider Methoden! Und es sieht auch noch ordentlich aus!
Danke fürs Lesen, ich hoffe, es hilft!
Lassen Sie mich im Kommentarbereich unten wissen, wenn Sie Probleme haben.
Viel Spaß beim Schreiben!
