Aby dodać obrazy w Markdown:
Składnia jest podana poniżej.
Aby zmienić rozmiar obrazu w Markdown:
Do zmiany rozmiaru obrazu w Markdown używamy tagu „ ” w kodzie HTML. Tylko ten tag pomaga w modyfikowaniu rozmiaru obrazu w Markdown, a składnia tego tagu „
” jest podana poniżej.
< obrazek src = 'nazwa obrazu' wszystko = „” szerokość = 'wartość' wzrost = 'wartość' >
Możemy zmienić rozmiar obrazu, ustawiając wartości szerokości i wysokości w liczbach oraz w procentach. Możemy również użyć atrybutu style w tym znaczniku „ ” do zmiany rozmiaru obrazu w Markdown.
Przykład nr 01:
Używamy Visual Studio Code 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 uzyskujemy w oknie podglądu. W edytorze tekstu najpierw dodajemy obraz w Markdown, umieszczając „!” symbol a następnie dodaj nawiasy kwadratowe, w których dodajemy „Tekst alternatywny”. Teraz dodajemy ścieżkę obrazu.
Wpisujemy nazwę obrazka wraz z jego rozszerzeniem, ponieważ zarówno kod jak i obrazek zapisywane są w tym samym katalogu. Po prostu dodajemy tutaj nazwę, która brzmi „cloud.png”. Następnie dodajemy tekst „Obraz w chmurze” i jest to tekst, który pokazuje się dopiero po najechaniu myszą. Teraz obraz jest dodany i możemy go również zobaczyć 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ą tagu „ ”. Najpierw wpisujemy „src”, w którym dodawana jest nazwa lub ścieżka obrazu. Następnie umieszczamy „alt” i dostosowujemy „Obraz w chmurze”. Dostosowaliśmy „szerokość” obrazu do „230”. „Wysokość” jest dostosowana do „300”. Dodajemy również „title” w tym tagu „
”, a wartość tego „title” to „Cloud title”. 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ż modyfikować „szerokość” i „wysokość” obrazu, podając ich wartości w procentach. Po dodaniu nazwy lub ścieżki obrazu i dostosowaniu „alt” do „Obraz w chmurze”, 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ą tagu „ ”. Wysokość obrazu, a także szerokość, to „50%”.
Przykład nr 04:
Teraz używamy atrybutu „style” w tym tagu „ ” do modyfikowania rozmiaru obrazu w Markdown. Musimy dodać nazwę obrazka, a następnie atrybut „alt”. Następnie umieszczamy atrybut „style” i dodajemy „szerokość i wysokość” jako jego wartości. Ustawiamy „szerokość” w pikselach, czyli „500px”, a „wysokość” to „400px”. Teraz rozmiar obrazu dostosuje się odpowiednio.
Rozmiar obrazu w tym wyniku został zaktualizowany; jego „szerokość” to teraz „500px”, a „wysokość” to „400px”. Jest to widoczne w wyniku kodu Markdown, który jest podany powyżej, gdzie dostosowaliśmy szerokość i wysokość w atrybucie stylu.
Przykład nr 05:
Dodajemy kolejny obraz. Ale w tym kodzie Markdown nie zmieniamy rozmiaru obrazu. Rozmiar obrazu zmienia się tylko wtedy, gdy wykorzystamy tag „ ”. Wstawiamy „!” a następnie dodaj tekst w nawiasach kwadratowych, czyli „Obraz słońca”. Po zamknięciu nawiasów kwadratowych umieszczamy nawiasy, w których wstawiliśmy nazwę obrazu „Nowe_słońce.png”, a następnie dodajemy tekst, który pokaże się po najechaniu myszą. W wyniku zostanie wyświetlony oryginalny rozmiar obrazu.
Obraz słońca jest pokazany tak, jak dodaliśmy ten obraz w kodzie Markdown. Ponadto widoczny jest oryginalny rozmiar obrazu, ponieważ nie możemy dostosować rozmiaru obrazu bez użycia tagu „ ”.
Przykład nr 06:
Używając tagu „ ”, zmieniamy teraz rozmiar tego obrazu. Najpierw do pola „src” dodajemy nazwę lub ścieżkę obrazu, którego rozmiar chcemy zmodyfikować. „Szerokość” i „wysokość” obrazu zostały zmienione na „300”. Rozmiar obrazu się 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ść” obrazu w procentach, możemy łatwo zmienić te wymiary. Oboje dostosowaliśmy „szerokość” i „wysokość” obrazu do „40%”, a następnie zamknęliśmy ten tag.
Oto obraz o 40% wysokości i 40% szerokości. Dodaliśmy tę szerokość i wysokość wewnątrz tagu „ ” po dodaniu nazwy obrazu.
Przykład nr 08:
Teraz używamy atrybutu „style” w tagu „ ”, aby zmienić rozmiar obrazu w Markdown. Dodaliśmy „szerokość i wysokość” jako wartości atrybutu „style” po dodaniu nazwy obrazu i atrybutu „alt”. Określona przez nas „szerokość” to „450px”, podczas gdy „wysokość” jest również dostosowana do „450px”. Rozmiar obrazu zmieni się teraz odpowiednio zgodnie z nowymi wartościami szerokości i wysokości.
Teraz wynik tego kodu jest również wyświetlany w oknie podglądu, które jest wyświetlane poniżej. Zarówno szerokość, jak i wysokość tego obrazu to teraz „450px” w poniższym wyniku.
Wniosek:
Szczegółowo zbadaliśmy koncepcję 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ą tagu „ ” i pokazaliśmy, jak to wszystko zrobić w Markdown. Zmieniliśmy rozmiar obrazka, wpisując wartości szerokości i wysokości w liczbach oraz w procentach. Wykorzystaliśmy również atrybut stylu w tagu „
” do aktualizacji lub modyfikacji rozmiaru obrazu w Markdown.