TLDR;
Usa questo HTML / CSS per aggiungere e centrare un'immagine e impostarne le dimensioni al 60% della larghezza dello spazio dello schermo all'interno del tuo file markdown, che di solito è un buon valore iniziale:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
Cambia il widthvalore CSS in qualunque percentuale tu voglia, o rimuovilo del tutto per usare la dimensione predefinita del markdown, che penso sia il 100% della larghezza dello schermo se l'immagine è più grande dello schermo, o altrimenti è la larghezza effettiva dell'immagine.
Fatto!
Oppure continua a leggere per ulteriori informazioni.
Ecco alcune opzioni HTML e CSS che funzionano perfettamente all'interno dei file markdown:
1. Centra e configura (ridimensiona) TUTTE le immagini nel tuo file markdown:
Copia e incolla questo nella parte superiore del file markdown per centrare e ridimensionare tutte le immagini nel file (quindi inserisci tutte le immagini che desideri con la normale sintassi di markdown):
<style>
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
</style>
Oppure, qui c'è lo stesso codice sopra ma con commenti HTML e CSS dettagliati per spiegare esattamente cosa sta succedendo:
<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
/* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
wrapping around the image. Instead, `block` format will force the text to be above or below the
image, but never to the sides. */
display:block;
/* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
settings which might have been `left` or `right`. `left` causes the image to be to the left,
with text wrapped to the right of the image, and `right` causes the image to be to the right,
with text wrapped to its left, so long as `display:inline-block` is also used. */
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
/* You may also set the size of the image, in percent of width of the screen on which the image
is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
the image no matter what screen or device it is being viewed on, maintaining proporptions and
not distorting it. */
width:60%;
/* You may optionally force a fixed size, or intentionally skew/distort an image by also
setting the height. Values for `width` and `height` are commonly set in either percent (%)
or pixels (px). Ex: `width:100%;` or `height:600px;`. */
/* height:400px; */
}
</style>
Ora, sia che tu inserisca un'immagine usando il markdown:
O HTML nel tuo file markdown:
<img src="https://i.stack.imgur.com/RJj4x.png">
... verrà automaticamente centrato e ridimensionato al 60% della larghezza della visualizzazione dello schermo, come descritto nei commenti all'interno dell'HTML e CSS sopra. (Naturalmente la dimensione del 60% è anche molto facilmente modificabile, e di seguito vi presento semplici modi per farlo su una base immagine per immagine).
2. Centra e configura le immagini caso per caso, una alla volta:
Indipendentemente dal fatto che tu abbia o meno copiato e incollato il <style>blocco sopra nella parte superiore del file markdown, anche questo funzionerà, poiché sovrascrive e ha la precedenza su qualsiasi impostazione di stile dell'ambito di file che hai impostato sopra:
<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
Puoi anche formattarlo su più righe, in questo modo, e funzionerà comunque:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is an optional description of the image to help the blind and show up in case the
image won't load"
style="display:block; /* override the default display setting of `inline-block` */
float:none; /* override any prior settings of `left` or `right` */
/* set both the left and right margins to `auto` to center the image */
margin-left:auto;
margin-right:auto;
width:60%; /* optionally resize the image to a screen percentage width if you want too */
">
3. Oltre a tutto quanto sopra, puoi anche creare classi di stile CSS per aiutare a stilizzare singole immagini:
Aggiungi tutto questo in cima al tuo file markdown.
<style>
/* By default, make all images center-aligned, and 60% of the width
of the screen in size */
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
</style>
Ora, il tuo imgblocco CSS ha impostato le impostazioni predefinite per le immagini da centrare e il 60% della larghezza dello spazio dello schermo in termini di dimensioni, ma puoi usare le classi CSS leftAligne rightAlignper sovrascrivere quelle impostazioni immagine per immagine.
Ad esempio, questa immagine sarà allineata al centro e di dimensioni pari al 60% (l'impostazione predefinita impostata sopra):
<img src="https://i.stack.imgur.com/RJj4x.png">
Questa immagine sarà allineata a sinistra , tuttavia, con il testo a capo alla sua destra, usando la leftAlignclasse CSS che abbiamo appena creato sopra!
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">
Potrebbe apparire così:
Puoi comunque sovrascrivere una qualsiasi delle sue proprietà CSS tramite l' styleattributo , tuttavia, ad esempio larghezza, in questo modo:
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
E ora otterrai questo:
4. Creare 3 classi CSS, ma non modificare le imgimpostazioni predefinite di markdown
Un'altra opzione a ciò che abbiamo appena mostrato sopra, in cui abbiamo modificato le img property:valueimpostazioni predefinite e creato 2 classi, è quella di lasciare solo tutte le imgproprietà di markdown predefinite , ma creare 3 classi CSS personalizzate, come questa:
<style>
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
width:60%;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
width:60%;
}
</style>
Usali, ovviamente, in questo modo:
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">
Nota come ho impostato manualmente la widthproprietà usando l' styleattributo CSS sopra, ma se avessi qualcosa di più complicato che volevo fare, avrei potuto anche creare alcune classi aggiuntive come questa, aggiungendole all'interno del <style>...</style>blocco sopra:
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
Ora puoi assegnare più classi allo stesso oggetto, in questo modo. Basta separare i nomi delle classi con uno spazio, NON con una virgola . In caso di impostazioni contrastanti, credo che qualsiasi impostazione arrivi per ultima sarà quella che avrà effetto, ignorando tutte le impostazioni precedentemente impostate. Questo dovrebbe valere anche nel caso in cui imposti più volte le stesse proprietà CSS nella stessa classe CSS o all'interno dello stesso styleattributo HTML .
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. Consolidare le impostazioni comuni nelle classi CSS:
L'ultimo trucco è quello che ho imparato in questa risposta qui: come posso usare i CSS per dare uno stile diverso a più immagini? . Come puoi vedere sopra, tutte e 3 le alignclassi CSS impostano la larghezza dell'immagine al 60%. Pertanto, questa impostazione comune può essere configurata contemporaneamente in questo modo, se lo si desidera, quindi è possibile configurare le impostazioni specifiche per ciascuna classe in seguito:
<style>
/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
width:60%;
}
/* Now set the specific properties for each class individually */
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
</style>
Più dettagli:
1. I miei pensieri su HTML e CSS in Markdown
Per quanto mi riguarda, tutto ciò che può essere scritto in un documento markdown e ottenere il risultato desiderato è tutto ciò che stiamo cercando, non una sintassi "puro markdown".
In C e C ++, il compilatore si compila fino al codice assembly e l'assembly viene quindi assemblato in binario. A volte, tuttavia, è necessario il controllo di basso livello che solo l'assembly può fornire e quindi è possibile scrivere assembly inline direttamente all'interno di un file sorgente C o C ++. Assembly è il linguaggio di "livello inferiore" e può essere scritto proprio all'interno di C e C ++.
Così è con markdown. Markdown è il linguaggio di alto livello interpretato in HTML e CSS. Tuttavia, laddove abbiamo bisogno di ulteriore controllo, possiamo semplicemente "incorporare" l'HTML e il CSS di livello inferiore direttamente all'interno del nostro file di markdown e sarà comunque interpretato correttamente. In un certo senso, quindi, HTML e CSS sono sintassi di "markdown" valide.
Quindi, per centrare un'immagine nel markdown, utilizzare HTML e CSS.
2. Inserimento di immagini standard nel markdown:
Come aggiungere un'immagine di base nel markdown con la formattazione HTML e CSS predefinita "dietro le quinte":
Questo markdown:
Produrrà questo output:
Questo è il mio esacottero da fuoco che ho realizzato .
Puoi anche aggiungere una descrizione tra parentesi quadre di apertura. Onestamente non sono nemmeno sicuro di quello che fa, ma forse viene convertito in un attributo di elemento HTML<img>alt , che viene visualizzato nel caso in cui l'immagine non possa essere caricata e potrebbe essere letta dai lettori di schermo per non vedenti. Quindi, questo markdown:
produrrà anche questo output:
3. Maggiori dettagli su ciò che sta accadendo in HTML / CSS quando si centra e si ridimensiona un'immagine in markdown:
Centrare l'immagine nel markdown richiede l'uso del controllo extra che HTML e CSS possono darci direttamente. Puoi inserire e centrare una singola immagine in questo modo:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is my hexacopter I built"
style="display:block;
float:none;
margin-left:auto;
margin-right:auto;
">
Ecco maggiori informazioni. su cosa sta succedendo qui:
- La
<imgparte del codice sopra è il " tag di inizio " HTML , mentre >alla fine è il " tag di fine " HTML .
- Tutto, dal tag iniziale al tag finale, compreso, costituisce questo
img" elemento " HTML .
- HTML
img "tag" / "elementi" vengono utilizzati per inserire immagini in HTML.
- Ciascuno dei compiti all'interno dell'elemento sta configurando un " attributo " HTML .
- L' attributo "stile" accetta lo stile CSS , quindi tutto ciò che è racchiuso tra virgolette doppie:
style=""è una property:value" dichiarazione " di valore-chiave CSS .
- Si noti che ogni "proprietà: dichiarazione di valore" CSS è separata da un punto e virgola (
;), mentre ogni "attributo" HTML in questo "elemento" è separato da uno spazio (
- Per far centrare l'immagine nel nostro codice HTML e CSS sopra, gli "attributi" chiave sono semplicemente
srce style.
- L'
altuno è opzionale.
- All'interno del HTML
styledell'attributo, che accetta lo stile CSS, le dichiarazioni chiave sono tutti e 4 che vi mostro: display:block, float:none, margin-left:auto, e margin-right:auto.
- Se prima non è stata impostata alcuna
float proprietà in precedenza, puoi lasciare questa dichiarazione, ma è una buona idea averla comunque nel caso.
- Se hai imparato per la prima volta come centrare un'immagine usando HTML e CSS qui: https://www.w3schools.com/howto/howto_css_image_center.asp .
- CSS utilizza i commenti in stile C (
/* my comment */).
Riferimenti:
- Maggiori informazioni sulla sintassi CSS qui: https://www.w3schools.com/css/css_syntax.asp
- Leggi "Tag HTML vs Elements" qui .
- Ho fatto molta della mia pratica di styling HTML e CSS nel mio readme markdown GitHub qui: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
- Ho imparato tutto ciò che so su HTML e CSS facendo clic su w3schools.com. Ecco alcune pagine specifiche:
- %%%%% https://www.w3schools.com/howto/howto_css_image_center.asp
- https://www.w3schools.com/css/css_float.asp
- https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
- https://www.w3schools.com/css/css3_images.asp
- https://www.w3schools.com/tags/default.asp
- Commenti HTML e CSS: https://www.w3schools.com/css/css_comments.asp
- Il mio esacottero di fuoco che ho fatto: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
