Các nhà phát triển đặt vị trí của một hình ảnh để thiết lập một hệ thống phân cấp trực quan rõ ràng bằng cách xác định thứ tự và kích thước của hình ảnh so với các phần tử HTML khác. Bằng cách đặt hình ảnh ở các vị trí khác nhau, các thiết kế hiện đại, độc đáo và tùy chỉnh cũng có thể được tạo ra, có thể thay đổi giao diện của trang web. Bài viết này trình bày quy trình đặt vị trí của hình ảnh bằng CSS.
Làm cách nào để đặt vị trí của hình ảnh trong CSS?
Bằng cách đặt vị trí của hình ảnh trong CSS, các lợi ích như “ vị trí chính xác ”, “ phần tử chồng lấp ' Và ' thiết kế đáp ứng ” có thể dễ dàng đạt được. Sử dụng những lợi ích này, các nhà phát triển có thể dễ dàng tùy chỉnh và xây dựng một trang web đầy đủ chức năng và bắt mắt. Có hai phương pháp/thuộc tính mà vị trí của một hình ảnh có thể được thiết lập. Các thuộc tính này được mô tả dưới đây:
Cách 1: Sử dụng thuộc tính Float
Các ' trôi nổi ” thuộc tính được cung cấp bởi CSS cho sự chuyển động của các phần tử HTML trong “ bên trái ' hoặc ' Phải ' phương hướng. Nó chủ yếu được sử dụng trong khi tạo bố cục đáp ứng cho vị trí chính xác của các phần tử HTML.
Chẳng hạn, thuộc tính “float” được sử dụng để căn chỉnh hình ảnh ở cả bên trái và bên phải của trang web:
< div >
< hình ảnh src = 'bg.jpg' chiều cao = '300px' chiều rộng = '400px' lớp học = 'vị tríPhải' >
< hình ảnh src = 'sách.jpg' chiều cao = '300px' chiều rộng = '400px' lớp học = 'vị tríTrái' >
div >
Trong đoạn mã trên:
-
- Đầu tiên, gốc “ div ” phần tử được tạo hoạt động như một vùng chứa cho các phần tử HTML.
- Tiếp theo, hai “
” các thẻ được sử dụng bên trong “
' nhãn.- Sau đó, các giá trị của “ 300px ' Và ' 400px ” được cung cấp cho “ chiều cao ' Và ' chiều rộng ” thuộc tính của cả hai “
” thẻ.
- Ngoài ra, chỉ định một lớp “ vị tríNgay ' Và ' vị tríTrái ” tương ứng với thẻ “
” thứ nhất và thứ hai.
Bây giờ, hãy nhập “
< phong cách >” để áp dụng các thuộc tính CSS sau:
.positionRight {
nổi: đúng;
}
.positionLeft {
nổi: trái;
}
phong cách >
Mô tả được đưa ra dưới đây:
-
- Đầu tiên, chọn “ vị tríNgay ” lớp và thiết lập giá trị của “ Phải ” để nó “ trôi nổi ' tài sản. Thao tác này sẽ di chuyển phần tử HTML đã chọn theo đúng hướng trên trang web.
- Tiếp theo, chọn “ vị tríTrái ” lớp và cung cấp giá trị của “ bên trái ” đến “ trôi nổi ' tài sản. Điều này di chuyển phần tử để di chuyển về phía bên trái.
Sau khi kết thúc giai đoạn biên dịch:
Đầu ra cho thấy hình ảnh đã được đặt ở vị trí trái và phải.Cách 2: Sử dụng Thuộc tính vị trí đối tượng
Các ' vị trí đối tượng ” thuộc tính đảm bảo vị trí của hình ảnh hoặc phần tử HTML tại một vị trí cụ thể trên trang web. Nó cho phép kiểm soát vị trí ngang và dọc, cho phép người dùng đạt được hiệu ứng hình ảnh hoặc bố cục mong muốn. Nó chủ yếu được các nhà phát triển sử dụng để cắt xén hình ảnh, tạo hình thu nhỏ, bố cục tùy chỉnh, v.v.
Thuộc tính này có thể nhận cả giá trị số và từ khóa. Chẳng hạn, cả giá trị số và từ khóa đều được cung cấp cho “ vị trí đối tượng ' tài sản. Nó đặt vị trí của một hình ảnh trong CSS trong đoạn mã dưới đây:
< phong cách >
.Giá trị kiểu số
{
vị trí đối tượng: 100px 20px;
}
.keywordValues
{
đối tượng-vị trí: trái;
}
phong cách >
< thân hình >
< div >
< hình ảnh src = 'sách.jpg' chiều cao = '300px' chiều rộng = '400px' lớp học = 'giá trị từ khóa' >
< hình ảnh src = 'bg.jpg' chiều cao = '300px' chiều rộng = '400px' lớp học = 'Giá trị kiểu số' >
div >
thân hình >
Trong đoạn mã trên:-
- Đầu tiên ' Giá trị kiểu số ” lớp được chọn bên trong “
' nhãn. Và các giá trị số của “ 100px 20px ” được cung cấp cho CSS “ vị trí đối tượng ' tài sản. Các ' 100px ” là không gian được thêm vào theo hướng ngang và “ 20px ” cho chiều dọc. - Tiếp theo, phần “ giá trị từ khóa ” lớp được chọn và giá trị từ khóa của “ bên trái ” được cung cấp cho “ vị trí đối tượng ” để căn chỉnh hình ảnh theo hướng bên trái.
- Sau đó, bên trong “ ” thẻ hai hình ảnh được tạo và các lớp được tạo ở trên được gán cho chúng.
- Đầu tiên ' Giá trị kiểu số ” lớp được chọn bên trong “
Sau khi kết thúc giai đoạn biên dịch, trang web xuất hiện như sau:
Ảnh chụp nhanh minh họa rằng hình ảnh hiện được đặt ở các vị trí cụ thể.Phần kết luận
Vị trí của hình ảnh có thể được đặt bằng CSS “ trôi nổi ' Và ' vị trí đối tượng ' của cải. Các ' trôi nổi ” thuộc tính lấy từ khóa làm giá trị và di chuyển phần tử ở vị trí trái hoặc phải. Mặt khác, “ vị trí đối tượng ”, nhận cả giá trị từ khóa và số theo hướng ngang và dọc. Bài viết này đã trình bày quy trình đặt vị trí của hình ảnh trong CSS.
- Sau đó, các giá trị của “ 300px ' Và ' 400px ” được cung cấp cho “ chiều cao ' Và ' chiều rộng ” thuộc tính của cả hai “