HTML cho phép chúng ta sử dụng hình ảnh trong các trang web và làm cho chúng hấp dẫn hơn bằng cách áp dụng các kiểu khác nhau. Nếu bạn cần thay đổi tỷ lệ co của hình ảnh hoặc hình ảnh của bạn không phù hợp với bố cục trang web của bạn, bạn có thể thay đổi kích thước của nó. Vì mục đích này, bạn có thể sử dụng “ bề rộng ' và ' Chiều cao ”Trên thuộc tính“ img ' nhãn. Các giá trị thuộc tính này có thể được đặt dễ dàng bằng các pixel CSS.

Trong hướng dẫn này, bạn sẽ học phương pháp thay đổi kích thước hình ảnh trong HTML.

Trước khi bắt đầu, cần phải thêm hình ảnh vào tệp HTML để thực hiện thao tác thay đổi kích thước hình ảnh.

Làm cách nào để Nhúng hình ảnh vào HTML?

Để thêm hình ảnh trong HTML, hãy sử dụng cú pháp sau:

Mô tả của cú pháp được đề cập ở trên được mô tả dưới đây. Các ' img ”Thẻ sử dụng hai thuộc tính:

• • “Src” được sử dụng để cung cấp đường dẫn (URL) của hình ảnh.
  • 'mọi điều' được sử dụng để cung cấp văn bản thay thế nếu hình ảnh không được hiển thị.

HTML

Đoạn mã dưới đây đại diện cho hai div. Trong div đầu tiên, chúng tôi đã thêm một tiêu đề ở giữa trên cùng của trang web là “ Kích thước hình ảnh trong HTML ”Bằng cách sử dụng thẻ

:

< div >
< trung tâm >
< h1 > Kích cỡ hình Trong HTML h1 >
trung tâm >
div >

Div thứ hai được thêm với lớp có tên “ thùng đựng hàng ”Và để thể hiện hình ảnh ở trung tâm, chúng tôi đã sử dụng thẻ

. Bên trong trung tâm, hãy viết mã được đề cập bên dưới để thêm hình ảnh:

< div lớp = 'thùng đựng hàng' >
< trung tâm >
< img src = 'images / Butterfly.jpg' mọi điều = 'văn bản thay thế' >
trung tâm >
div >

Hình ảnh đã chọn với “ 640 * 437 ”Tỷ lệ co sẽ trông như thế này:

Phần tiếp theo sẽ trình bày phương pháp thay đổi kích thước hình ảnh.

Làm thế nào để thay đổi kích thước hình ảnh trong HTML?

Bạn có thể tùy chỉnh kích thước của hình ảnh hoặc thay đổi kích thước bằng cách sử dụng “ bề rộng ' và ' Chiều cao ”Để đặt chiều rộng và chiều cao của nó.

Bây giờ, hãy đặt giá trị chiều rộng của hình ảnh đã thêm là “ 300 ”Và xem nó hoạt động như thế nào:

< img src = 'images / Butterfly.jpg' mọi điều = 'văn bản thay thế' bề rộng = '300' >

Có thể thấy rằng chiều rộng hình ảnh đã được thay đổi, và nó đã được thay đổi kích thước thành công:

Ngoài chiều rộng, “ Chiều cao Thuộc tính ”cũng có thể được sử dụng cho cùng một mục đích. Để xem sự khác biệt về kích thước, hãy đặt “ 550 ”Pixel làm chiều cao hình ảnh:

< img src = 'images / Butterfly.jpg' mọi điều = 'văn bản thay thế' bề rộng = '300' Chiều cao = '550' >

Bạn có thể quan sát rõ ràng sự khác biệt về kích thước hình ảnh:

Đó là cách các thuộc tính chiều rộng và chiều cao được sử dụng để thay đổi kích thước hình ảnh.

Sự kết luận

Trong HTML, “ Chiều cao ' và ' bề rộng ”Thuộc tính được sử dụng để thay đổi kích thước hình ảnh. Bạn có thể thay đổi tỷ lệ khung hình mặc định của hình ảnh đã thêm bằng cách đặt các giá trị của các thuộc tính này. Kết quả là, có thể thấy sự khác biệt rõ ràng về kích thước hình ảnh. Blog này đã trình bày phương pháp sử dụng các thuộc tính chiều cao và cân nặng để thay đổi kích thước hình ảnh trong HTML.