Cách Giảm Hình ảnh Trong Html

Mục lục:

Cách Giảm Hình ảnh Trong Html
Cách Giảm Hình ảnh Trong Html

Video: Cách Giảm Hình ảnh Trong Html

Video: Cách Giảm Hình ảnh Trong Html
Video: Hướng dẫn căn giữa hình ảnh website bằng html, css đơn giản, dễ hiểu| Unitop.vn 2024, Tháng Ba
Anonim

Trong ngôn ngữ đánh dấu siêu văn bản (HTML), một lệnh đặc biệt “thẻ” được sử dụng để hiển thị hình ảnh trên một trang. Thẻ này được gọi là img và chứa một tập hợp các biến - "thuộc tính". Với sự trợ giúp của các thuộc tính, bạn có thể xác định tất cả các khía cạnh của việc hiển thị hình ảnh trong trang siêu văn bản, bao gồm cả kích thước của nó. Tuy nhiên, đây không phải là cách duy nhất để giải quyết vấn đề - bạn cũng có thể giảm kích thước của hình ảnh bằng cách sử dụng Cascading Style Sheets (CSS).

Cách giảm hình ảnh trong html
Cách giảm hình ảnh trong html

Hướng dẫn

Bước 1

Đặt thuộc tính chiều cao và chiều rộng trong thẻ chịu trách nhiệm hiển thị hình ảnh mong muốn. Đặt hình ảnh đầu tiên theo kích thước chiều dọc của hình ảnh và hình ảnh thứ hai theo chiều ngang. Đặt cả hai số theo pixel, nhưng không cần chỉ ra đơn vị - px - ở đây. Khi tính toán các giá trị cần thiết cho các thuộc tính này, hãy chú ý đến việc tuân thủ các tỷ lệ thu nhỏ của bức tranh, nếu không nó sẽ được hiển thị ở dạng méo mó. Ví dụ: để đưa vào trang một bức ảnh được giảm một nửa từ tệp có tên SomePic.jpg, kích thước ban đầu của chúng là 500 x 300 pixel, thẻ có thể được thực hiện bằng lệnh sau:

Bước 2

Bạn có thể đặt tỷ lệ giảm kích thước hình ảnh gốc theo phần trăm. Để thực hiện việc này, chỉ sử dụng thuộc tính chiều cao mà không chỉ định chiều rộng và thêm dấu phần trăm sau khi chỉ định số xác định kích thước. Ví dụ: bạn có thể đạt được hiệu quả tương tự như trong ví dụ ở bước trước với thẻ được viết ở dạng sau:

Bước 3

Nếu bạn muốn chỉ định kích thước của hình ảnh bằng cách sử dụng mô tả kiểu, hãy sử dụng cùng một tên thẻ - img - và các thuộc tính - chiều rộng và chiều cao. Trong trường hợp này, các đơn vị đo lường - px, pt hoặc% - phải luôn được chỉ định. Để đặt giảm một nửa kích thước của tất cả các hình ảnh trên trang, hãy đặt mục nhập sau vào khối mô tả kiểu: img {height: 50%;} Nếu bạn chỉ cần giảm kích thước của một hình ảnh, hãy thêm một thuộc tính id bổ sung vào thẻ của nó và chỉ định nó một giá trị duy nhất cho các hình ảnh của giá trị trang này - ví dụ: PicOne: Thêm cùng một giá trị vào bản ghi kiểu, tách nó bằng "băm" # khỏi tên thẻ. Mô tả kiểu hoàn chỉnh trong trường hợp này có thể giống như sau: img # OnePic {height: 50%;}

Đề xuất: