Computer >> Máy Tính >  >> Lập trình >> HTML

Kích thước hình ảnh HTML

Kích thước hình ảnh HTML đề cập đến chiều cao và chiều rộng của hình ảnh. Chúng được liệt kê dưới dạng thuộc tính HTML trên phần tử . Đây là cách đặt chúng.

Cú pháp

Cú pháp để đặt thuộc tính chiều rộng và chiều cao của <img> thẻ là:

<img src="<name of website>" alt="<alt tag>" height="<in px>" width="<in px>" />

Dưới đây là đoạn mã hiển thị cách nó hoạt động:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <h1>Image Size in HTML</h1>
   <h2>without attributes</h2>
   <img src="https://placekitten.com/500/500" />
   <h2>with attributes</h2>
   <img src="https://placekitten.com/500/500" width="300" height="300" />
   <script src="script.js"></script>
 </body>
</html>

Chiều cao và chiều rộng của <img> phần tử là một số tính bằng pixel (ở giữa các dấu ngoặc kép). Bạn nên chỉ ra cả thuộc tính chiều cao và chiều rộng để không gian được phân bổ cho hình ảnh trước khi tải trang web. Nếu kích thước của hình ảnh không được chỉ định trước khi hiển thị trang, trang sẽ điều chỉnh bố cục của nó khi hình ảnh tải.

Hỗ trợ trình duyệt

Thuộc tính chiều rộng và chiều cao của <img> phần tử được hỗ trợ trên tất cả các trình duyệt web.