Pengembang mengatur posisi gambar untuk membangun hierarki visual yang jelas dengan menentukan urutan dan dimensi gambar relatif terhadap elemen HTML lainnya. Dengan menempatkan gambar di berbagai posisi, desain modern, unik, dan khusus juga dapat dihasilkan yang dapat mengubah tampilan dan nuansa situs web. Artikel ini mendemonstrasikan prosedur pengaturan posisi gambar menggunakan CSS.
Bagaimana Cara Mengatur Posisi Gambar di CSS?
Dengan mengatur posisi gambar di CSS, manfaatnya seperti “ penempatan yang tepat ”, “ elemen yang tumpang tindih ' Dan ' desain responsif ” dapat dengan mudah dicapai. Dengan menggunakan manfaat ini, pengembang dapat dengan mudah menyesuaikan dan membangun situs web yang berfungsi penuh dan menarik. Ada dua metode/properti yang dapat digunakan untuk mengatur posisi gambar. Properti ini dijelaskan di bawah ini:
Metode 1: Menggunakan Properti Float
“ mengambang ” properti disediakan oleh CSS untuk pergerakan elemen HTML di “ kiri ' atau ' Kanan ' arah. Sebagian besar digunakan saat membuat tata letak responsif untuk penempatan elemen HTML yang tepat.
Misalnya, properti 'float' digunakan untuk menyelaraskan gambar di sisi kiri dan kanan halaman web:
< div >
< img src = 'bg.jpg' tinggi = '300px' lebar = '400px' kelas = 'posisi Kanan' >
< img src = 'buku.jpg' tinggi = '300px' lebar = '400px' kelas = 'posisi Kiri' >
div >
Dalam kode di atas:
-
- Pertama, akar “ div ” elemen dibuat yang berfungsi sebagai wadah untuk elemen HTML.
- Selanjutnya, dua '
” tag digunakan di dalam “
” tag.- Setelah itu, nilai “ 300px ' Dan ' 400px ” diberikan kepada “ tinggi ' Dan ' lebar ” atribut keduanya “
” tag.
- Juga, tetapkan kelas ' posisikanan ' Dan ' posisi Kiri ” masing-masing ke tag “
” pertama dan kedua.
Sekarang, masukkan “
< gaya >” untuk menerapkan properti CSS berikut:
.positionRight {
mengapung: benar;
}
.positionLeft {
mengapung: kiri;
}
gaya >
Deskripsi diberikan di bawah ini:
-
- Pertama, pilih “ posisikanan ” kelas dan atur nilai “ Kanan ' ke ' nya mengambang ' Properti. Ini memindahkan elemen HTML yang dipilih ke arah yang benar di halaman web.
- Selanjutnya, pilih “ posisi Kiri ” dan berikan nilai “ kiri ' ke ' mengambang ' Properti. Ini menggerakkan elemen untuk bergerak ke sisi kiri.
Setelah akhir fase kompilasi:
Output menunjukkan bahwa gambar telah diatur ke posisi kiri dan kanan.Metode 2: Menggunakan Properti objek-posisi
“ posisi objek ” properti memastikan penempatan gambar atau elemen HTML pada posisi tertentu di halaman web. Ini memberikan kontrol atas pemosisian horizontal dan vertikal, memungkinkan pengguna mencapai efek visual atau tata letak yang diinginkan. Ini sebagian besar digunakan oleh pengembang untuk memotong gambar, membuat thumbnail, tata letak khusus, dll.
Properti ini dapat mengambil nilai numerik dan kata kunci. Misalnya, nilai numerik dan kata kunci disediakan untuk “ posisi objek ' Properti. Ini mengatur posisi gambar di CSS dalam cuplikan kode di bawah ini:
< gaya >
.numericalValues
{
posisi objek: 100px 20px;
}
.keywordValues
{
objek-posisi: kiri;
}
gaya >
< tubuh >
< div >
< img src = 'buku.jpg' tinggi = '300px' lebar = '400px' kelas = 'nilaikata kunci' >
< img src = 'bg.jpg' tinggi = '300px' lebar = '400px' kelas = 'nilai numerik' >
div >
tubuh >
Dalam cuplikan kode di atas:-
- Pertama, “ numericalValues ” kelas dipilih di dalam “
” tag. Dan nilai numerik dari “ 100px 20px ” diberikan ke CSS “ posisi objek ' Properti. “ 100px ” adalah ruang yang ditambahkan pada arah horizontal dan “ 20px ” untuk vertikal. - Selanjutnya, “ nilaikata kunci ” kelas dipilih dan nilai kata kunci dari “ kiri ” diberikan kepada “ posisi objek ” untuk menyelaraskan gambar ke arah kiri.
- Setelah itu, di dalam “
” tag dua gambar dibuat, dan kelas yang dibuat di atas ditetapkan untuknya.
- Pertama, “ numericalValues ” kelas dipilih di dalam “
Setelah akhir fase kompilasi, halaman web muncul seperti ini:
Snapshot mengilustrasikan bahwa gambar sekarang diatur ke posisi tertentu.Kesimpulan
Posisi gambar dapat diatur menggunakan CSS “ mengambang ' Dan ' posisi objek ” properti. “ mengambang ” properti mengambil kata kunci sebagai nilai dan memindahkan elemen di posisi kiri atau kanan. Di sisi lain, “ posisi objek ”, mengambil nilai kata kunci dan numerik dalam arah horizontal dan vertikal. Artikel ini telah mendemonstrasikan prosedur untuk mengatur posisi gambar di CSS.
- Setelah itu, nilai “ 300px ' Dan ' 400px ” diberikan kepada “ tinggi ' Dan ' lebar ” atribut keduanya “