Cách căn chỉnh hình ảnh trong html đây là một từ khóa được tìm nhiều nhất trên google về chủ đề về html. Trong bài viết này, ATP Media sẽ giúp bạn tìm hiểu cách căn lề, điều chỉnh kích cỡ hình ảnh trong html một cách đơn giản dễ hiểu nhất nhé.
Cách chèn ảnh vào HTML bằng thẻ img
Chúng ta có thể chèn bất kỳ Hình ảnh nào vào website của bạn bằng cách sử dụng thẻ <img>. Sau đây là cú pháp để dùng thẻ này:
Thẻ này là một trong những thẻ đơn (trống), nghĩa là chỉ cần mở thẻ chứ không cần đóng thẻ.
Ví dụ:
<head>
<title>Chen hinh anh vao HTML</title>
</head>
<body>
<p>Vi du the img trong HTML.</p>
<img src=”https://atpmedia.vn/wp-content/uploads/2021/08/logo-media-2048×995-1-e1622080908346.png.webp” alt=”Chèn hình ảnh trong HTML” />
</body>
</html>
Kết quả hiển thị:
Chúng ta có thể sử dụng file Ảnh PNG, JPEG hoặc GIF tùy thích nhưng chắc chắn rằng bạn xác định rõ tên file Hình ảnh trong thuộc tính src. Tên file có phân biệt chữ hoa & thường.
Thuộc tính alt có tác dụng: nếu hình ảnh không thể hiển thị vì mạng yếu hay lý do nào đó, nó sẽ hiển thị một văn bản thay thế cho ảnh đó.
Chỉnh vị trí ảnh trong html
Một lời khuyên cho bạn là nên lưu trữ tất cả hình ảnh trong một thư mục riêng. Hãy lưu các file HTML thực thi trong folder chính và tạo thư mục phụ image để lưu trữ ảnh cho dự án nhằm dễ dàng quản lý hơn.
Ví dụ:
Bạn tạo folder chính tên “test”, lưu file html tại đây. Trong đó bạn tạo thêm folder phụ tên “images”, chứa hình ảnh “logo”.
Lúc này bạn có thể dễ dàng chèn ảnh vào code html dễ dàng hơn nhiều với cú pháp sau:
<img src=”./images/logo.png” />
Cách chỉnh kích cỡ hình ảnh trong HTML
Bạn có thể căn chỉnh size ảnh như chiều cao, độ rộng của ảnh bằng cách thêm thuộc tính height và width vào trong thẻ img. Thường thì size ảnh xác định chiều rộng, chiều cao bằng đơn vị px (pixel) hoặc mặc định là kích thước thật của nó.
Ví dụ:
<head>
<title>Căn chỉnh size ảnh trong HTML</title>
</head>
<body>
<p>Vi du can chinh size anh HTML.</p>
<img src=”https://atpmedia.vn/wp-content/uploads/2021/08/logo-media-2048×995-1-e1622080908346.png.webp” alt=”Chỉnh kích cỡ ảnh trong HTML” width=”200″ height=”200″ />
</body>
</html>
Kết quả hiển thị sẽ là:
Thiết lập viền (border) cho hình ảnh trong HTML
Nếu bạn muốn hình ảnh đẹp hơn thì có thể chỉnh viền xung quanh ảnh bằng thuộc tính border. Nếu độ dày viền bằng 0, nghĩa là sẽ không tồn tại Border xung quanh ảnh.
<html>
<head>
<title>Thiết lập border ảnh trong HTML</title>
</head>
<body>
<p>Vi du border anh HTML.</p>
<img src=”https://atpmedia.vn/wp-content/uploads/2021/08/logo-media-2048×995-1-e1622080908346.png.webp” alt=”Chỉnh border ảnh trong HTML” border=”3″ />
</body>
</html>
Kết quả sẽ là:
Căn lề ảnh trong html – chỉnh vị trí hình ảnh
Theo mặc định thì hình ảnh bạn thêm vào sẽ được căn theo cạnh trái của trang web, nhưng chúng ta có thể sử dụng thuộc tính align để căn lề lại ở giữa hoặc bên phải.
align=”right” => ảnh sẽ được căn lề bên phải.
Ví dụ:
<html>
<head>
<title>Chỉnh vị trí ảnh trong HTML</title>
</head>
<body>
<p>Vi du can le anh HTML.</p>
<img src=”https://atpmedia.vn/wp-content/uploads/2021/08/logo-media-2048×995-1-e1622080908346.png.webp” alt=”Căn lề ảnh trong HTML” align=”right” />
</body>
</html>
Kết quả sẽ là:
Ngoài ra, nếu bạn muốn căn giữa hình ảnh, thì có thể thêm thẻ center ở bên ngoài thẻ img là được.
<img src=”abc.png”>
</center>
Xem thêm:
