Chiều rộng hình ảnh trong HTML

Theo mặc định, hình ảnh được hiển thị với kích thước thực của chúng. Ví dụ, hình ảnh biểu tượng cảm xúc mà chúng ta đã hiển thị ở trên có kích thước thực là 130 trên 130 pixel và chúng ta thấy hình ảnh có kích thước tương tự trong trình duyệt.

Nếu muốn, bạn có thể thay đổi kích thước hình ảnh bằng cách đặt chiều rộng cho nó. Điều này được thực hiện bằng thuộc tính width.

Hãy đặt chiều rộng cho hình ảnh của chúng ta là 100 pixel làm ví dụ. Để làm điều này, hãy chỉ định số 100 làm giá trị của thuộc tính width, như thế này:

Kích thước hình ảnh trên màn hình sẽ như thế nào? Có thể nghĩ rằng sẽ như sau: chiều rộng 100 pixel như chúng ta đã đặt, và chiều cao thực là 130, vì chúng ta không đặt nó. Trên thực tế, điều đó sẽ không đúng.

Chiều rộng thực sự sẽ là 100 pixel, còn chiều cao sẽ tự điều chỉnh để tỷ lệ của hình ảnh không bị méo, nghĩa là cũng sẽ trở thành 100 pixel.

Hãy chạy và xác nhận điều này:

: