Cách Tăng Kích Thước Hình ảnh Trong Html

Mục lục:

Cách Tăng Kích Thước Hình ảnh Trong Html
Cách Tăng Kích Thước Hình ảnh Trong Html

Video: Cách Tăng Kích Thước Hình ảnh Trong Html

Video: Cách Tăng Kích Thước Hình ảnh Trong Html
Video: Bài 3: CSS chỉnh kích thước hình ảnh và thuộc tính text-align căn giữa các thành phần trang web 2024, Tháng tư
Anonim

Bạn có thể thay đổi kích thước của hình ảnh được hiển thị trên trang bằng cách chỉ định các thuộc tính thích hợp cho thẻ

chịu trách nhiệm hiển thị đồ họa trên trang HTML. Tăng hoặc giảm được thực hiện thông qua các thuộc tính chiều rộng và chiều cao.

Cách tăng kích thước của hình ảnh trong html
Cách tăng kích thước của hình ảnh trong html

Chèn một hình ảnh

Trước khi chỉnh sửa, hãy thêm hình ảnh vào trang bằng cách chỉ định các thẻ

… Để chỉnh sửa tài liệu HTML, bạn cần mở trang trong bất kỳ trình soạn thảo văn bản nào. Nhấp chuột phải vào tệp và chọn thuộc tính "Open With" - "Notepad". Bạn cũng có thể chỉ định bất kỳ trình soạn thảo nào khác thuận tiện hơn cho bạn khi sử dụng để thay đổi mã.

Chuyển đến phần tài liệu và tìm thẻ

… Nếu hình ảnh chưa được thêm vào trang, hãy nhập mã sau:

Đường dẫn đến tệp hình ảnh có thể là tương đối hoặc tuyệt đối. Thuộc tính alt="Image" chịu trách nhiệm về tên của hình ảnh và thêm chú thích cho nó, sẽ được hiển thị khi con trỏ chuột qua hình ảnh.

Thay đổi kích thước

Để phóng to hình ảnh, hãy đặt các thông số chiều rộng và chiều cao thích hợp cho nó bằng cách thêm các thuộc tính vào thẻ hình ảnh:

Tham số chiều rộng tương ứng với chiều rộng của hình ảnh và chiều cao chứa chỉ báo về chiều cao của hình ảnh. Trong trường hợp này, khi trang được mở, một hình ảnh có chiều rộng 300 pixel và chiều cao 350 pixel sẽ được hiển thị trong cửa sổ trình duyệt. Bạn cũng có thể thêm các thuộc tính hspace và vspace để thay đổi cài đặt định dạng trên trang:

Trong bộ mô tả này, lề ngang (hspace) và dọc (vspace) từ hình ảnh đã được chỉ định. Bất kỳ văn bản nào được thêm vào trang sẽ có khoảng cách 5 pixel theo chiều ngang so với hình ảnh và 10 pixel theo chiều dọc. Thuộc tính border chịu trách nhiệm tạo đường viền 1 pixel xung quanh hình ảnh.

Cần lưu ý rằng kích thước của hình ảnh có thể được đặt không chỉ bằng pixel mà còn theo tỷ lệ phần trăm so với kích thước của cửa sổ trình duyệt. Ví dụ:

Kết quả của công việc của mã này, hình ảnh sẽ được kéo dài trên toàn bộ chiều rộng của cửa sổ. Điều đáng chú ý là hình ảnh trong trường hợp này có thể bị méo. Mức độ phóng đại của hình ảnh phụ thuộc vào chất lượng của chính hình ảnh đó.

Lưu các thay đổi đã thực hiện bằng chức năng "Tệp" - "Lưu" của cửa sổ "Notepad". Kiểm tra sự hiển thị của hình ảnh trong cửa sổ trình duyệt bằng cách mở tệp HTML bằng cách nhấp chuột phải và chọn tùy chọn "Open With". Trong danh sách các tùy chọn được đề xuất, hãy chọn chương trình bạn sử dụng để duyệt Internet. Bạn có thể chỉnh sửa tệp HTML bất kỳ số lần nào để điều chỉnh kích thước hình ảnh.

Đề xuất: