TLDR;
Użyj tego HTML / CSS, aby dodać i wyśrodkować obraz i ustawić jego rozmiar na 60% szerokości miejsca na ekranie w pliku znaczników, co zwykle jest dobrą wartością początkową:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
Zmień widthwartość CSS na dowolny procent lub usuń ją całkowicie, aby użyć domyślnego rozmiaru znacznika, który moim zdaniem wynosi 100% szerokości ekranu, jeśli obraz jest większy niż ekran, lub w przeciwnym razie jest to rzeczywista szerokość obrazu.
Gotowy!
Lub czytaj dalej, aby uzyskać znacznie więcej informacji.
Oto różne opcje HTML i CSS, które doskonale działają w plikach Markdown:
1. Wyśrodkuj i skonfiguruj (zmień rozmiar) WSZYSTKIE obrazy w pliku przeceny:
Po prostu skopiuj i wklej to na górze pliku Markdown, aby wyśrodkować i zmienić rozmiar wszystkich obrazów w pliku (a następnie wstaw dowolne obrazy z normalną składnią Markdown):
<style>
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
</style>
Lub ten sam kod jak powyżej, ale ze szczegółowymi komentarzami HTML i CSS, aby dokładnie wyjaśnić, co się dzieje:
<!-- (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>
Teraz, czy wstawisz obraz za pomocą markdown:
Lub HTML w pliku przeceny:
<img src="https://i.stack.imgur.com/RJj4x.png">
... zostanie automatycznie wyśrodkowany i dopasowany do 60% szerokości widoku ekranu, jak opisano w komentarzach w HTML i CSS powyżej. (Oczywiście rozmiar 60% jest również bardzo łatwo zmienialny, a poniżej przedstawiam proste sposoby, aby zrobić to na zasadzie obraz po obrazie).
2. Wyśrodkuj i skonfiguruj obrazy indywidualnie dla każdego przypadku:
Niezależnie od tego, czy skopiowałeś i wkleiłeś powyższy <style>blok w górnej części pliku przeceny, zadziała to również, ponieważ zastępuje i ma pierwszeństwo przed ustawieniami stylu zakresu plików, które możesz ustawić powyżej:
<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
Możesz również sformatować go w wielu liniach, takich jak ten, i nadal będzie działać:
<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. Oprócz wszystkich powyższych, możesz także tworzyć klasy stylów CSS, aby pomóc stylizować poszczególne obrazy:
Dodaj to wszystko na początku pliku przeceny.
<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>
Teraz twój imgblok CSS ustawił domyślne ustawienie dla obrazów, które mają być wyśrodkowane i 60% szerokości przestrzeni ekranu, ale możesz użyć klas leftAligni rightAlignCSS, aby zastąpić te ustawienia dla poszczególnych obrazów.
Na przykład ten obraz będzie wyśrodkowany i ma 60% rozmiaru (domyślnie ustawiłem powyżej):
<img src="https://i.stack.imgur.com/RJj4x.png">
Ten obraz zostanie wyrównany do lewej strony , z zawijaniem tekstu po prawej stronie, przy użyciu leftAlignklasy CSS, którą właśnie stworzyliśmy powyżej!
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">
Może to wyglądać tak:
Nadal możesz zastąpić dowolne z jego właściwości CSS za pomocą styleatrybutu , takiego jak szerokość, jak poniżej:
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
A teraz dostaniesz to:
4. Utwórz 3 klasy CSS, ale nie zmieniaj imgdomyślnych wartości przeceny
Inną opcją tego, co właśnie pokazaliśmy powyżej, w którym zmodyfikowaliśmy img property:valueustawienia domyślne i utworzyliśmy 2 klasy, jest pozostawienie wszystkich domyślnych imgwłaściwości Markdown w spokoju, ale utworzenie 3 niestandardowych klas CSS, takich jak to:
<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>
Używaj ich oczywiście w ten sposób:
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">
Zauważ, jak ręcznie ustawiłem widthwłaściwość za pomocą stylepowyższego atrybutu CSS , ale gdybym miał coś bardziej skomplikowanego, co chciałem zrobić, mógłbym również utworzyć dodatkowe klasy, dodając je wewnątrz <style>...</style>powyższego bloku:
/* 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 */
}
Teraz możesz przypisać wiele klas do tego samego obiektu, jak ten. Po prostu oddziel nazwy klas spacjami, NIE przecinkami . W przypadku sprzecznych ustawień uważam, że którekolwiek ustawienie będzie ostatnie, będzie obowiązywać, zastępując wszelkie wcześniej ustawione ustawienia. Powinno tak być również w przypadku, gdy ustawisz te same właściwości CSS wiele razy w tej samej klasie CSS lub w tym samym styleatrybucie HTML .
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. Skonsoliduj wspólne ustawienia w klasach CSS:
Ostatnią sztuczką jest ta, której nauczyłem się w tej odpowiedzi tutaj: Jak używać CSS do stylizowania wielu obrazów w inny sposób? . Jak widać powyżej, wszystkie 3 alignklasy CSS ustawiają szerokość obrazu na 60%. Dlatego to wspólne ustawienie można ustawić jednocześnie tak, jak chcesz, a następnie możesz ustawić szczegółowe ustawienia dla każdej klasy:
<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>
Więcej szczegółów:
1. Moje przemyślenia na temat HTML i CSS w Markdown
Jeśli o mnie chodzi, wszystko, co można zapisać w dokumencie Markdown i uzyskać pożądany wynik, to wszystko, czego szukamy, a nie jakaś składnia „czystego Markdown”.
W C i C ++ kompilator kompiluje się do kodu asemblera, a następnie asembluje się do binarnego. Czasami jednak potrzebna jest kontrola niskiego poziomu, którą może zapewnić tylko zestaw, a więc można napisać zestaw wbudowany bezpośrednio w pliku źródłowym C lub C ++. Asembler jest językiem „niższego poziomu” i można go pisać bezpośrednio w C i C ++.
Tak też jest ze zniżką. Markdown to język wysokiego poziomu, który jest interpretowany do HTML i CSS. Jednak tam, gdzie potrzebujemy dodatkowej kontroli, możemy po prostu „wstawić” niższy poziom HTML i CSS bezpośrednio do naszego pliku przeceny i nadal będzie on interpretowany poprawnie. W pewnym sensie zatem HTML i CSS są poprawną składnią „markdown”.
Tak więc, aby wyśrodkować obraz na przecenie, użyj HTML i CSS.
2. Standardowe wstawianie obrazu w przecenach:
Jak dodać podstawowy obraz w przecenie z domyślnym formatowaniem HTML i CSS „za kulisami”:
Ta obniżka:
Wyprodukuje ten wynik:
Oto mój heksakopter strzelający ogniem .
Możesz również opcjonalnie dodać opis w nawiasach kwadratowych otwierających. Szczerze mówiąc, nie jestem nawet pewien, co to robi, ale być może jest konwertowany na atrybut elementu HTML<img>alt , który jest wyświetlany w przypadku, gdy obraz nie może się załadować, i może być czytany przez czytniki ekranu dla osób niewidomych. A więc to przecena:
wygeneruje również ten wynik:
3. Więcej szczegółów na temat tego, co dzieje się w HTML / CSS podczas centrowania i zmiany rozmiaru obrazu w znaczniku:
Wyśrodkowanie obrazu w systemie Markdown wymaga użycia dodatkowej kontroli, którą HTML i CSS mogą nam dać bezpośrednio. Możesz wstawić i wyśrodkować indywidualny obraz w ten sposób:
<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;
">
Oto więcej informacji. o tym, co się tutaj dzieje:
<imgCzęść powyższego kodu HTML jest „ rozpocząć tag ”, a >na końcu jest HTML „ tag end ”.- Wszystko, od tagu początkowego do tagu końcowego, włącznie, tworzy ten
img„ element ” HTML .
- HTML
img „tags” / „elementy” są używane do wstawiania obrazów w HTML.
- Każde z przypisań w elemencie konfiguruje „ atrybut ” HTML .
- Atrybutu „style” akceptuje CSS stylizacji , więc wszystko wewnątrz cudzysłów tutaj:
style=""jest CSS property:valueklucz-wartość „ deklaracja ”.
- Zauważ, że każda CSS „właściwość: deklaracja wartości” jest oddzielona średnikiem (
;), podczas gdy każdy „atrybut” HTML w tym „elemencie” jest oddzielony spacją (
- Aby uzyskać obraz do centrum w naszym kodzie HTML i CSS powyżej przycisk „atrybutów” są po prostu
srci stylete.
- Ten
altjest opcjonalny.
- Wewnątrz HTML
styleatrybutu, który akceptuje CSS stylizacji, najważniejsze deklaracje są wszystkie 4 pokazują, że: display:block, float:none, margin-left:auto, i margin-right:auto.
- Jeśli wcześniej nic nie ustawiało tej
float właściwości , możesz pominąć tę deklarację, ale i tak warto ją mieć na wszelki wypadek.
- Jeśli po raz pierwszy dowiedziałeś się, jak wyśrodkować obraz za pomocą HTML i CSS tutaj: https://www.w3schools.com/howto/howto_css_image_center.asp .
- CSS używa komentarzy w stylu C (
/* my comment */).
Bibliografia:
- Przeczytaj więcej o składni CSS tutaj: https://www.w3schools.com/css/css_syntax.asp
- Przeczytaj o „Tagi HTML a elementy” tutaj .
- Dużo ćwiczyłem stylizację HTML i CSS w pliku Readdown GitHub tutaj: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
- Nauczyłem się wszystkiego, co wiem o HTML i CSS, klikając na w3schools.com. Oto kilka konkretnych stron:
- %%%%% 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
- Komentarze HTML i CSS: https://www.w3schools.com/css/css_comments.asp
- Mój helikopter strzelający z ognia zrobiłem: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
