Dodaj obrazy w Markdown i zmodyfikuj rozmiar obrazu

„Markdown” jest jednym z języków znaczników, który zapewnia różne urządzenia do dodawania tekstu, nagłówków, akapitów, list i linków, a także możemy zastosować formatowanie do tych elementów w Markdown. Możemy również wstawić obrazy do Markdown, a następnie modyfikować rozmiar obrazów, które dodaliśmy do Markdown. Aby modyfikować lub zmieniać rozmiar obrazu w Markdown, musimy użyć znacznika. W tym przewodniku pokażemy, jak dodać obrazy w Markdown, a także jak modyfikować rozmiar obrazu w Markdown.

Do dodawania obrazów w Markdown:

Składnia jest podana poniżej.

![Tekst Alt] (ścieżka nazwy obrazu/obrazu z rozszerzeniem „tekst, który pokazuje, gdy myszy”)

Do modyfikowania rozmiaru obrazu w Markdown:

Do modyfikacji rozmiaru obrazu w Markdown używamy znacznika „” HTML. Tylko ten znacznik pomaga modyfikować rozmiar obrazu w Markdown, a składnia tego znacznika „” podano poniżej.

Możemy zmienić rozmiar obrazu, ustawiając wartości szerokości i wysokości w liczbach, a także w wartościach procentowych. Możemy również użyć atrybutu stylu w tym znaczniku „” do modyfikacji rozmiaru obrazu w Markdown.

Przykład nr 01:

Używamy kodu Visual Studio do wykonywania kodów Markdown. W przypadku kodów Markdown musimy otworzyć zarówno edytor tekstu, jak i okno podglądu. W edytorze tekstu musimy dodać wejście, a wyjście jest uzyskiwane w oknie podglądu. W edytorze tekstu najpierw dodajemy obraz w Markdown, umieszczając „!„Symbol, a następnie dodaj kwadratowe wsporniki, w których dodajemy„ tekst alt ”. Teraz dodajemy ścieżkę obrazu.

Wprowadzamy nazwę obrazu z jego rozszerzeniem, ponieważ zarówno kod, jak i obraz są zapisywane w tym samym katalogu. Więc po prostu dodajemy nazwę tutaj „Cloud.PNG ”. Następnie dodajemy tekst, który jest „obrazem chmur” i jest to tekst, który pokazuje tylko wtedy, gdy myszy. Teraz obraz jest dodawany i możemy również zobaczyć ten obraz w oknie podglądu.

Obraz chmury jest pokazany poniżej, ponieważ dodaliśmy ten obraz w kodzie Markdown, który jest wyświetlany powyżej.

Przykład nr 02:

Teraz modyfikujemy rozmiar tego obrazu za pomocą znacznika „”. Najpierw wprowadzamy „SRC”, w którym dodawana jest nazwa lub ścieżka obrazu. Następnie umieszczamy „ALT” i dostosowujemy „obraz chmury”. Dostosowaliśmy „szerokość” obrazu do „230”. „Wysokość” jest dostosowywana do „300”. Dodajemy również „tytuł” ​​w tym znaczniku „”, a wartość tego „tytułu” to „Tytuł w chmurze”. Teraz rozmiar obrazu jest modyfikowany. Możesz zobaczyć zmodyfikowany rozmiar obrazu w oknie podglądu.

Rozmiar obrazu w tym wyniku jest modyfikowany, a „szerokość” obrazu to „230”, a „wysokość” to „300”. Dzieje się tak, ponieważ dostosowaliśmy tę szerokość i wysokość w kodzie Markdown.

Przykład nr 03:

Możemy również zmodyfikować obraz „szerokość” i „wysokość”, umieszczając ich wartości w wartościach procentowych. Po dodaniu nazwy lub ścieżki obrazu i dostosowaniu „Alt” do „Cloud Image”, ustawiliśmy „szerokość” i „wysokość” obrazu na „50%”. Następnie dodaj „tytuł” ​​i zamknij ten tag.

Oto obraz, którego rozmiar jest modyfikowany za pomocą znacznika „”. Wysokość obrazu, a także szerokość, to „50%”.

Przykład nr 04:

Teraz wykorzystujemy atrybut „stylu” w tym znaczniku „” do modyfikacji rozmiaru obrazu w Markdown. Musimy dodać nazwę obrazu, a następnie atrybut „alt”. Następnie umieszczamy atrybut „stylu” i dodaliśmy „szerokość i wysokość” jako jego wartości. „Szerokość”, którą ustawiamy, znajduje się w pikselach, które to „500px”, a „wysokość” to „400px”. Teraz rozmiar obrazu odpowiednio się dostosuje.

Rozmiar obrazu w tym wyniku został zaktualizowany; Jego „szerokość” to teraz „500px”, a „wysokość” to „400px”. Jest to widoczne w wyniku podanego powyżej kodu Markdown.

Przykład nr 05:

Dodajemy kolejny obraz. Ale w tym kodzie Markdown nie zmieniamy rozmiaru obrazu. Rozmiar obrazu zmienia się tylko wtedy, gdy wykorzystaliśmy znacznik „”. Umieściliśmy „!”, A następnie dodaj tekst wewnątrz kwadratowych nawiasów, które są„ obrazem słońca ”. Po zamknięciu kwadratowych nawiasów umieszczamy nawiasy, w których włożyliśmy nazwę obrazu „New_Sun.png ”, a następnie dodaj tekst, który wyświetli się na Mouseover. Oryginalny rozmiar obrazu wyświetli się w wyniku.

Obraz Słońca jest pokazany, gdy dodaliśmy ten obraz w kodzie Markdown. Ponadto oryginalny rozmiar obrazu jest widoczny, ponieważ nie możemy dostosować rozmiaru obrazu bez użycia znacznika „”.

Przykład nr 06:

Zastosowując znacznik „”, teraz zmieniamy rozmiar tego obrazu. Najpierw dodajemy nazwę lub ścieżkę obrazu, którego rozmiar chcemy zmodyfikować do pola „SRC”. Zarówno „szerokość” obrazu, jak i „wysokość” zostały zmienione na „300”. Rozmiar obrazu się teraz zmienił. Okno podglądu pokazuje nowy rozmiar obrazu.

Szerokość i wysokość obrazu zostały zmodyfikowane do „300”.

Przykład nr 07:

Ustawiając wartości „szerokość” i „wysokości” obrazu w wartościach procentowych, możemy łatwo zmienić te wymiary. Oboje dostosowaliśmy „szerokość” obrazu i „wysokość” do „40%”, a następnie zamknęliśmy ten znacznik.

Oto obraz o wysokości 40%, a także 40% w szerokości. Dodaliśmy tę szerokość i wysokość wewnątrz znacznika „” po dodaniu nazwy obrazu.

Przykład nr 08:

Teraz używamy atrybutu „Style” w znaczniku „”, aby zmienić rozmiar obrazu w Markdown. Dodaliśmy „szerokość i wysokość” jako wartości do atrybutu „Styl” po dodaniu nazwy obrazu i atrybutu „Alt”. „Szerokość”, którą określamy, to „450px”, podczas gdy „wysokość” jest również dostosowywana do „450px.„Rozmiar obrazu zmieni się teraz odpowiednio w zależności od tych nowych wartości szerokości i wysokości.

Teraz wynik tego kodu jest również pokazany w oknie podglądu, który jest wyświetlany poniżej. Zarówno szerokość, jak i wysokość tego obrazu są teraz „450px” w tym wyniku poniżej.

Wniosek:

Zbadaliśmy koncepcję szczegółowo dodawania obrazów w tym przewodniku, a także zbadaliśmy, jak modyfikować rozmiar obrazu w Markdown. Dodaliśmy obrazy w Markdown i zmodyfikowaliśmy ich rozmiar za pomocą znacznika „” i pokazaliśmy, jak zrobić je wszystkie w Markdown. Zmieniliśmy rozmiar obrazu, umieszczając wartości szerokości i wysokości w liczbach, a także w wartościach procentowych. Wykorzystaliśmy również atrybut stylu w znaczniku „” do aktualizacji lub modyfikacji rozmiaru obrazu w Markdown.