Ik ben net begonnen met Markdown. Ik vind het geweldig, maar er is één ding dat me dwarszit: hoe kan ik de grootte van een afbeelding wijzigen met Markdown?
De documentatie geeft alleen de volgende suggestie voor een afbeelding:
Als het mogelijk is, wil ik dat de afbeelding ook gecentreerd wordt. Ik vraag om algemene Markdown, niet alleen hoe GitHub het doet.
Antwoord 1, autoriteit 100%
Je zou gewoon wat HTML kunnen gebruiken in je Markdown:
<img src="drawing.jpg" alt="drawing" width="200"/>
Of via style-kenmerk (niet ondersteund door GitHub)
<img src="drawing.jpg" alt="drawing" style="width:200px;"/>
Of u kunt een aangepast CSS-bestand gebruiken zoals beschreven in dit antwoord op Markdown en beelduitlijning
CSS in een ander bestand:
img[alt=drawing] { width: 200px; }
Antwoord 2, autoriteit 52%
Met bepaalde Markdown-implementaties (inclusief Mouen Gemarkeerd met 2(alleen macOS)) kun je =WIDTHxHEIGHTtoevoegen na de URL van het grafische bestand om het formaat van de afbeelding te wijzigen. Vergeet de spatie voor de =niet.
U kunt de HOOGTE overslaan
Antwoord 3, autoriteit 32%
Het geaccepteerde antwoord hier werkt niet met een Markdown-editor die beschikbaar is in de apps die ik tot nu toe heb gebruikt, zoals Ghost, Stackedit.io of zelfs in de StackOverflow-editor. Ik heb hier in de StackEdit.io issue trackereen tijdelijke oplossing gevonden.
De oplossing is om de HTML-syntaxis rechtstreeks te gebruiken en het werkt perfect:
<img src="https://....jpg" width="200" height="200" />
Antwoord 4, autoriteit 13%
Gebruik gewoon:
<img src="Assets/icon.png" width="200">
in plaats van:
Antwoord 5, autoriteit 7%
Als u MarkDown voor PanDoc schrijft, kunt u dit doen:
{ width=50% }
Dit voegt style="width: 50%;"toe aan de HTML <img>-tag, of [width=0.5\textwidth]naar \includegraphicsin LaTeX.
Bron: http://pandoc.org/MANUAL.html#extension-link_attributes
Antwoord 6, autoriteit 6%
Misschien is dit recentelijk veranderd, maar de Kramdown-documentenlaten een eenvoudige oplossing zien.
Uit de documenten
Here is an inline {:height="36px" width="36px"}.
And here is a referenced ![smile]
[smile]: smile.png
{: height="36px" width="36px"}
Werkt op github met Jekyll en Kramdown.
Antwoord 7, autoriteit 4%
Door twee antwoorden te combineren kwam ik tot een oplossing, die er misschien niet zo mooi uitziet,
maar het werkt!
Het maakt een miniatuur met een specifieke grootte waarop kan worden geklikt om je naar de afbeelding met de maximale resoluties te brengen.
[<img src="image.png" width="250"/>](image.png)
Hier is een voorbeeld! Ik heb het getest op Visual Code en Github.
Bedankt voor de feedback, we weten dat dit ook werkt op:
- GitLab
- Jupyter Notebook
Antwoord 8, autoriteit 2%
Vervang door <img src="https://image-url.type" width="200" height="200">
Antwoord 9, autoriteit 2%
Je zou kunnen putten uit het altattribuutdat kan worden ingesteld in bijna alle Markdown-implementaties/renderes samen met CSS-selectorsop basis van attribuut waarden. Het voordeel is dat men gemakkelijk een hele reeks verschillende beeldformaten (en verdere attributen) kan definiëren.
Markdown:
CSS:
img[alt="minipic"] {
max-width: 20px;
display: block;
}
Antwoord 10, autoriteit 2%
Als je kramdown gebruikt, kun je dit doen:
{:.foo}
Voeg dit vervolgens toe aan uw aangepaste CSS:
.foo {
text-align: center;
width: 100px;
}
Antwoord 11
Voortbouwend op het antwoord van Tiemes, als u CSS 3gebruikt, kunt u gebruik een subtekenreeksselector:
Deze selector komt overeen met elke afbeelding met een alt-tag die eindigt op ‘-fullwidth’:
img[alt$="-fullwidth"]{
width: 100%;
display: block;
}
Dan kun je nog steeds de alt-tag gebruiken voor het beoogde doelom de afbeelding te beschrijven .
De afwaardering voor het bovenstaande kan zoiets zijn als:
Ik heb dit gebruikt in Ghost-markdown en het werkt goed.
Antwoord 12
Als je referentiestijlafbeeldingen gebruikt in Markdown met Gihub-smaak:
Here is an image of tree:
![alt text][tree]{height=400px width=500px}
[//]: # (Image References)
[tree]: ./images/tree.png "This is a tree"
Antwoord 13
Deze werkt voor mij, het staat niet in één regel, maar ik hoop dat het voor jou werkt.
<div>
<img src="attachment:image.png" width="500" height="300"/>
</div>
Antwoord 14
Ik kwam hier op zoek naar een antwoord. Enkele geweldige suggesties hier. En gouden informatie die erop wijst dat markdown HTML volledig ondersteunt!
Een goede schone oplossing is altijd om met pure html-syntaxis te werken. Met de tag.
Maar ik probeerde me nog steeds aan de markdown-syntaxis te houden, dus probeerde ik het om een tag te wikkelen en voegde ik alle attributen toe die ik wilde voor de afbeelding in de div-tag. En het WERKT!!
<div style="width:50%"></div>
Dus op deze manier worden externe afbeeldingen ondersteund!
Ik dacht dat ik dit hier zou plaatsen, omdat het niet in een van de antwoorden staat. 🙂
Antwoord 15
Voor diegenen die geïnteresseerd zijn in een rmarkdownen knitroplossing. Er zijn enkele manieren om het formaat van afbeeldingen in een .rmd-bestand te wijzigen zonder het gebruik van html:
Je kunt eenvoudig een breedte voor een afbeelding opgeven door {width=123px}toe te voegen. Gebruik geen witruimte tussen haakjes:
{width=250px}
Een andere optie is om knitr::include_graphics:
te gebruiken
```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```
Antwoord 16
Je zou deze ook kunnen gebruiken met kramdown:
markdown
{:.some-css-class style="width: 200px"}
of
markdown
{:.some-css-class width="200"}
Op deze manier kunt u direct willekeurige attributen toevoegen aan het laatste html-element. Om klassen toe te voegen is er een snelkoppeling .class.secondclass.
Antwoord 17
Ik heb de eenvoudige tag-parser gescript voor het gebruik van een img-tag op aangepast formaat in Jekyll.
https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
{% img /path/to/img.png 100x200 %}
Je kunt het bestand toevoegen aan de map _plugins.
Antwoord 18
Ik weet dat dit antwoord een beetje specifiek is, maar het kan anderen in nood helpen.
Zoals veel foto’s worden geüpload met behulp van de imgur service , jij kan de hier gedetailleerde pagina om de grootte te wijzigen van de foto.
Bij het uploaden van een foto in een GitHub-probleemopmerkingen, wordt het via Imgur toegevoegd, dus dit zal veel helpen als de foto erg groot is.
eigenlijk, in plaats van http://i.imgur.com/12345.jpg , Je zou http://i.imgur.com/12345m.jpg voor middelgrote afbeelding maken.
Antwoord 19
Voor R-Markdown werkte geen van de bovenstaande oplossingen voor mij, dus ik wendde me tot normaal latex Syntaxis, die prima werkt.
\begin{figure}
\includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}
Dan kunt u b.v. De \begin{center}Verklaring om het beeld te centreren.
Antwoord 20
Voor alle op zoek naar oplossingen die werken in R Markdown / Bookdown , deze van de vorige oplossingen doen / niet werken of hebben geen geringe aanpassing nodig:
WERK
-
Voeg
{ width=50% }OF{ width=50% height=50% }{ width=50% }-
{ width=50% height=50% } -
Belangrijk: Geen komma tussen breedte en hoogte – dwz
{ width=50%, height=30% }Will Werk !
-
Voeg
{ height="36px" width="36px" }{ height="36px" width="36px" }- Opmerking:
{:height="36px" width="36px"}met dubbele punt, vanaf @sayth, lijkt niet te werken met R-markdown
Werkt niet:
- Toevoegen
=WIDTHxHEIGHT- na de URL van het grafische bestand om het formaat van de afbeelding te wijzigen (vanaf @prosseek)
- noch
=WIDTHxHEIGHTnoch=WIDTHalleenwerk
Antwoord 21
Bij gebruik van Flask(ik gebruik het met platte pagina’s). Ik ontdekte dat het expliciet inschakelen (om de een of andere reden niet standaard was) ‘attr_list’ in extensies binnen de call to markdown de truc doet – en dan kan men de attributen gebruiken (erg handig ook om toegang te krijgen tot CSS – class=”my class” bijvoorbeeld…).
FLATPAGES_HTML_RENDERER = prerender_jinja
en de functie:
def prerender_jinja(text):
prerendered_body = render_template_string(Markup(text))
pygmented_body = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list'])
return pygmented_body
En dan in Markdown:
{: width=200px}
Antwoord 22
Er is een manier met klasse toevoegen en CSS-stijl
![pic][logo]{.classname}
schrijf dan de link en css hieronder op
[logo]: (picurl)
<style type="text/css">
.classname{
width: 200px;
}
</style>
Antwoord 23
het wijzigen van markdown beeld bijlagen in JUPYTER Notebook
Ik gebruik jupyter_core-4.4.0& AMP; jupyter notebook.
Als u uw afbeeldingen bevestigt door ze in te voegen in de marketing zoals deze:
Deze attachmentkoppelingen niet werk:
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
Doe dit . Dit werkt .
Voeg gewoon divbeugels toe.
<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>
Ik hoop dat dit helpt!
Antwoord 24
Voor toekomstige referentie:
Markdown-implementatie voor Joplin maakt het mogelijk om de grootte van geïmporteerde beelden op de volgende manier te regelen:
<img src=":/7653a812439451eb1803236687a70ca" width="450"/>
Deze functie is gevraagd hier en als beloofd door Laurent Dit is geïmplementeerd.
Het kostte me een tijdje om het Joplin-specifieke antwoord te vinden.
Antwoord 25
De toevoeging van relatieve afmetingen aan de bron-URL wordt weergegeven in de meerderheid van de marketinglegers.
We hebben dit geïmplementeerd in Corillaomdat ik denk dat het patroon er een is dat de verwachtingen van bestaande workflows volgt zonder de gebruiker te vertrouwen op basis-HTML. Als uw favoriete tool geen vergelijkbaar patroon volgt, is het de moeite waard om een functieverzoek in te dienen.
Voorbeeld van syntaxis:
Voorbeeld van kitten:
Antwoord 26
Als het wijzigen van de initiële prijsverlaging geen optie voor je is, kan deze hack werken:
newHtml = oldHtml.replace(/<img/g, '<img height="100"');
Ik heb dit gebruikt om het formaat van afbeeldingen te kunnen wijzigen voordat ze in een e-mail worden verzonden (omdat Outlook elke css-styling van afbeeldingen negeert)
Antwoord 27
Het pure <img … width=”50%”>hierboven vermeld, werkte op mijn Github Readme.md-document.
Mijn echte probleem was echter dat de afbeelding zich in een tabelcel bevond, waardoor de tekst in de cel ernaast werd gecomprimeerd. Dus de andere manier was om de kolombreedte in Markdown-tabellen in te stellen, maar de oplossingen leken niet echt genoeg markdownishvoor mijn ochtend.
Eindelijk heb ik beide problemen opgelost door simpelweg de cel naast de tekst te forceren met zoveel “& nbsp;”als ik nodig had.
Ik hoop dat dit helpt. Dag en bedankt iedereen.
Antwoord 28
Via gewone achterwaarts compatibele MD:
waarbij w, h het selectiekader definieert waarin het aspect past, zoals bijvoorbeeld in Flutter-pakket https://pub .dev/packages/flutter_markdown
Heroverweeg html-oplossingen die de compatibiliteit verbreken, aangezien mensen native/niet-html-componenten/apps kunnen gebruiken om prijsverlagingen weer te geven.
Antwoord 29
Voor gebruikers van IntelliJ IDEAraadpleegt u Markdown Navigatorplug-in.
Voorvertoning geeft afbeeldingen, badges, HTML, enz. weer.
Antwoord 30
Als we gewoon de normale HTML-afbeeldingstag zoals deze gebruiken, werkt het, als je bootstrap gebruikt voor styling. Ik gebruik dit in een website gemaakt met Jekyll.
<img class="img-fluid" src="./img/face.jpg" alt="img-verification">
Als we bootstrap-klassen toevoegen zoals in dit voorbeeld, werkt het prima.