Thêm hình ảnh trong Markdown và sửa đổi kích thước hình ảnh

Them Hinh Anh Trong Markdown Va Sua Doi Kich Thuoc Hinh Anh

“Markdown” là một trong những ngôn ngữ Markup cung cấp các phương tiện khác nhau để thêm văn bản, tiêu đề, đoạn văn, danh sách và liên kết và chúng tôi cũng có thể áp dụng định dạng cho các phần tử này trong Markdown. Chúng tôi cũng có thể chèn hình ảnh trong Markdown và sau đó sửa đổi kích thước của hình ảnh mà chúng tôi đã thêm trong Markdown. Để sửa đổi hoặc thay đổi kích thước của hình ảnh trong Markdown, chúng ta phải sử dụng thẻ . Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm hình ảnh trong Markdown cũng như cách sửa đổi kích thước của hình ảnh trong Markdown.

Để thêm hình ảnh trong Markdown:

Cú pháp được đưa ra dưới đây.

! [alt text] (đường dẫn của hình ảnh / tên hình ảnh có phần mở rộng 'Văn bản hiển thị khi di chuột qua' )

Để sửa đổi kích thước hình ảnh trong Markdown:

Để sửa đổi kích thước của hình ảnh trong Markdown, chúng tôi sử dụng thẻ “ ” của HTML. Chỉ thẻ này mới giúp sửa đổi kích thước của hình ảnh trong Markdown và cú pháp của thẻ “ ” này được đưa ra bên dưới.







< img src = 'Tên Hình ảnh' mọi điều = '' bề rộng = 'giá trị' Chiều cao = 'giá trị' >

Chúng ta có thể thay đổi kích thước của hình ảnh bằng cách đặt các giá trị chiều rộng và chiều cao bằng số cũng như phần trăm. Chúng tôi cũng có thể sử dụng thuộc tính style trong thẻ “ ” này để sửa đổi kích thước của hình ảnh trong Markdown.



Ví dụ # 01:

Chúng tôi sử dụng Mã Visual Studio để thực hiện các mã Đánh dấu. Đối với mã Markdown, chúng ta phải mở cả trình soạn thảo văn bản cũng như cửa sổ xem trước. Trong trình soạn thảo văn bản, chúng ta phải thêm đầu vào và đầu ra thu được trong cửa sổ xem trước. Trong trình soạn thảo văn bản, trước tiên chúng tôi thêm hình ảnh vào Markdown bằng cách đặt dấu “!” và sau đó thêm dấu ngoặc vuông trong đó chúng tôi thêm “Văn bản thay thế”. Bây giờ, chúng ta đang thêm đường dẫn của hình ảnh.



Chúng tôi nhập tên của hình ảnh với phần mở rộng của nó vì cả mã và hình ảnh đều được lưu trong cùng một thư mục. Vì vậy, chúng tôi chỉ thêm tên ở đây là “cloud.png”. Sau đó, chúng tôi thêm văn bản là “Hình ảnh đám mây” và đây là văn bản chỉ hiển thị khi di chuột qua. Bây giờ, hình ảnh được thêm vào và chúng ta cũng có thể thấy hình ảnh này trong cửa sổ xem trước.





Hình ảnh đám mây được hiển thị bên dưới vì chúng tôi đã thêm hình ảnh này vào mã Markdown được hiển thị ở trên.



Ví dụ # 02:

Bây giờ, chúng tôi đang sửa đổi kích thước của hình ảnh này bằng cách sử dụng thẻ “ ”. Đầu tiên, chúng tôi nhập “src” trong đó tên hoặc đường dẫn của hình ảnh được thêm vào. Sau đó, chúng tôi đặt “alt” và điều chỉnh “Cloud Image”. Chúng tôi đã điều chỉnh 'chiều rộng' của hình ảnh thành '230'. “Chiều cao” được điều chỉnh thành “300”. Chúng tôi cũng thêm “tiêu đề” trong thẻ “ ” này và giá trị của “tiêu đề” này là “Tiêu đề đám mây”. Bây giờ, kích thước của hình ảnh được sửa đổi. Bạn có thể xem kích thước đã sửa đổi của hình ảnh trong cửa sổ xem trước.

Kích thước của hình ảnh trong kết quả này được sửa đổi và “chiều rộng” của hình ảnh là “230” và “chiều cao” là “300”. Điều này là do chúng tôi đã điều chỉnh chiều rộng và chiều cao này trong mã Markdown.

Ví dụ # 03:

Chúng tôi cũng có thể sửa đổi “chiều rộng” và “chiều cao” của hình ảnh bằng cách đặt các giá trị của chúng theo tỷ lệ phần trăm. Sau khi thêm tên hoặc đường dẫn của hình ảnh và điều chỉnh “alt” thành “Hình ảnh đám mây”, chúng tôi đã đặt “chiều rộng” và “chiều cao” của hình ảnh thành “50%”. Sau đó, thêm 'tiêu đề' và đóng thẻ này.

Đây là hình ảnh có kích thước được sửa đổi bằng cách sử dụng thẻ “ ”. Chiều cao cũng như chiều rộng của hình ảnh là '50%'.

Ví dụ # 04:

Bây giờ, chúng tôi đang sử dụng thuộc tính “style” trong thẻ “ ” này để sửa đổi kích thước của hình ảnh trong Markdown. Chúng ta phải thêm tên của hình ảnh và sau đó là thuộc tính 'alt'. Sau đó, chúng tôi đặt thuộc tính 'style' và thêm 'width and height' làm giá trị của nó. “Chiều rộng” chúng tôi đặt tính bằng pixel là “500px” và “chiều cao” là “400px”. Bây giờ, kích thước hình ảnh sẽ điều chỉnh cho phù hợp.

Kích thước của hình ảnh trong kết quả này đã được cập nhật; 'chiều rộng' của nó bây giờ là '500px' và 'chiều cao' của nó là '400px'. Điều này có thể nhìn thấy do mã Markdown được đưa ra ở trên, nơi chúng tôi đã điều chỉnh chiều rộng và chiều cao trong thuộc tính style.

Ví dụ # 05:

Chúng tôi đang thêm một hình ảnh khác. Nhưng trong mã Markdown này, chúng tôi không thay đổi kích thước của hình ảnh. Kích thước của hình ảnh chỉ được thay đổi khi chúng tôi sử dụng thẻ “ ”. Chúng tôi đặt dấu “!” và sau đó thêm văn bản bên trong dấu ngoặc vuông là “Hình ảnh mặt trời”. Sau khi đóng dấu ngoặc vuông, chúng tôi đặt dấu ngoặc đơn mà chúng tôi đã chèn tên hình ảnh “New_sun.png” và sau đó thêm văn bản sẽ hiển thị khi di chuột qua. Kích thước ban đầu của hình ảnh sẽ hiển thị trong kết quả.

Hình ảnh của mặt trời được hiển thị như chúng tôi đã thêm hình ảnh này trong mã Markdown. Ngoài ra, kích thước ban đầu của hình ảnh được hiển thị vì chúng tôi không thể điều chỉnh kích thước của hình ảnh mà không sử dụng thẻ “ ”.

Ví dụ # 06:

Bằng cách sử dụng thẻ “ ”, chúng tôi hiện đang thay đổi kích thước của hình ảnh này. Đầu tiên, chúng tôi thêm tên hoặc đường dẫn của hình ảnh có kích thước mà chúng tôi muốn sửa đổi vào trường “src”. Cả “chiều rộng” và “chiều cao” của hình ảnh đã được thay đổi thành “300”. Kích thước của hình ảnh hiện đã thay đổi. Cửa sổ xem trước hiển thị kích thước mới của hình ảnh.

Cả chiều rộng và chiều cao của hình ảnh đều đã được sửa đổi thành “300”.

Ví dụ # 07:

Bằng cách đặt các giá trị “chiều rộng” và “chiều cao” của hình ảnh theo tỷ lệ phần trăm, chúng tôi có thể dễ dàng thay đổi các kích thước này. Cả hai chúng tôi đều điều chỉnh “chiều rộng” và “chiều cao” của hình ảnh thành “40%” và sau đó đóng thẻ này.

Đây là hình ảnh có 40% chiều cao và 40% chiều rộng. Chúng tôi đã thêm chiều rộng và chiều cao này vào bên trong thẻ “ ” sau khi thêm tên của hình ảnh.

Ví dụ # 08:

Bây giờ, chúng tôi đang sử dụng thuộc tính “style” trong thẻ “ ” để thay đổi kích thước của hình ảnh trong Markdown. Chúng tôi đã thêm 'chiều rộng và chiều cao' làm giá trị cho thuộc tính 'style' sau khi thêm tên hình ảnh và thuộc tính 'alt'. “Chiều rộng” mà chúng tôi chỉ định là “450px”, trong khi “chiều cao” cũng được điều chỉnh thành “450px”. Kích thước hình ảnh bây giờ sẽ thay đổi thích hợp theo các giá trị chiều rộng và chiều cao mới này.

Bây giờ, kết quả của mã này cũng được hiển thị trong cửa sổ xem trước được hiển thị bên dưới. Cả chiều rộng và chiều cao của hình ảnh này hiện là “450px” trong kết quả bên dưới.

Sự kết luận:

Chúng tôi đã khám phá khái niệm thêm hình ảnh một cách chi tiết trong hướng dẫn này và chúng tôi cũng đã khám phá cách sửa đổi kích thước của hình ảnh trong Markdown. Chúng tôi đã thêm các hình ảnh trong Markdown và sửa đổi kích thước của chúng với sự trợ giúp của thẻ “ ” và đã chỉ ra cách thực hiện tất cả những điều này trong Markdown. Chúng tôi đã thay đổi kích thước của hình ảnh bằng cách đặt các giá trị chiều rộng và chiều cao bằng số cũng như phần trăm. Chúng tôi cũng đã sử dụng thuộc tính style trong thẻ “ ” để cập nhật hoặc sửa đổi kích thước của hình ảnh trong Markdown.