Jika Anda membutuhkan kebebasan untuk menskalakan gambar, dan gambar untuk memperbesar ukurannya tidak lebih besar dari nilai maksimum aslinya, Anda dapat menggunakan kode berikut
contoh
img {
max-width. 100%;
tinggi. mobil;
}
Mencoba "
Tip. konten web bisa lebih responsif referensi desain CSS tutorial desain responsif
Gambar teks
Cara mencari teks gambar
Kartu gambar
contoh
div. polaroid {
lebar. 80%;
warna latar belakang. putih;
bayangan kotak. 0 4px 8px 0 RGBA [0, 0, 0, 0,2], 0 6px 20px 0 RGBA [0, 0, 0, 0. 19];
}
img {lebar. 100%}
div. wadah {
perataan teks. tengah;
lapisan. 10px kali 20px;
}
Mencoba "
Filter gambar
CSS filter
atribut untuk menambahkan elemen dengan efek visual [mis. Fuzzy dan saturasi]
Catatan. Internet Explorer, atau Safari 5. 1 [dan sebelumnya] tidak mendukung properti ini
contoh
Edit semua warna untuk foto hitam putih [100% abu-abu]
img {
-webkit-filter. skala abu-abu [100% ];
filter. skala abu-abu [100%];
}
Mencoba "
Tip. Kunjungi Panduan Filter Referensi CSS untuk konten lainnya
Galeri Responsif
contoh
responsif {
lapisan. 0 6px;
mengambang. kiri;
lebar. 24,99999%;
}
@media hanya layar dan [max-width. 700px] {
responsif {
lebar. 49,99999%;
margin. 6px 0;
}
}
@media hanya layar dan [max-width. 500px] {
responsif {
lebar. 100%;
}
}
Mencoba "
Gambar Kapital [kapital]
Contoh ini menunjukkan cara menggabungkan CSS dan JavaScript untuk membuat gambar
Pertama, kami menggunakan CSS untuk membuat jendela modal [dialog], yang disembunyikan secara default
Kami kemudian menggunakan JavaScript untuk menampilkan jendela modal ketika kami mengklik, gambar akan ditampilkan di jendela pop-up
Gambar merupakan salah satu komponen penting dalam suatu website atau konten online tertentu untuk membuat website atau konten tersebut menarik
Pada artikel kali ini kita akan membahas bagaimana cara menyisipkan atau memodifikasi gambar khususnya pada HTML. Ada beberapa cara untuk menyematkan gambar HTML yang akan kita bahas pada tutorial berikut
Daftar isi
Menggunakan Tag Gambar HTML
Untuk mendefinisikan gambar HTML Anda perlu menggunakan
Anda juga dapat menggunakan tag gambar HTML untuk menganimasikan gambar dengan ekstensi. gif
_Perlu Anda ingat bahwa gambar HTML hanya dapat atribut dan tidak ada konten yang pasti. Artinya, ini mendefinisikan elemen kosong dan tidak memerlukan tag penutup
Artikel Terkait Tutorial HTML/CSS 33. Membuat Web Worker HTML5, Sederhana dan Praktis
Gambar HTML Interaktif
Gambar juga dapat berfungsi sebagai tautan jika Anda menempatkan tag gambar HTML di dalam sepasang tag jangkar
Anda harus mencatat bahwa dalam hal ini Anda perlu memasukkan dua alamat URL yang merupakan sumber gambar dan URL baru untuk terhubung ke pengguna
Gambar Peta dalam HTML
Satu gambar dapat berisikan banyak area yang dapat diklik dengan link berbeda-beda. Hal ini disebut dengan HTML image map atau gambar peta HTML. Untuk mendefinsikan salah satunya, Anda perlu menggunakan tag :
Gambar HTML membuat area yang dapat diklik pada gambar HTML tertentu. Untuk menautkan gambar peta ke gambar yang benar, Anda harus menentukan nama peta terlebih dahulu, lalu memasukkannya sebagai nilai untuk atribut peta pengguna di tag gambar HTML
Untuk menentukan area yang dapat diklik dalam peta gambar, Anda perlu menggunakan elemen sebagai anak dari elemen :
_
Dimensi dan Penempatan Gambar
Untuk mengubah lebar dan tinggi gambar HTML Anda, Anda memerlukan gaya dasar CSS. Gunakan atribut style dan atur properti lebar dan tinggi dalam piksel
HTML5 memperkenalkan atribut lebar dan tinggi yang terpisah. Artinya, Anda dapat memodifikasi dimensi tanpa menggunakan atribut style. Namun, kami menyarankan untuk tetap menggunakan gaya, karena menggunakan gaya sebaris menyelamatkan Anda dari lembar gaya lain yang memengaruhi gambar Anda di HTML. Misalnya
_
Menggunakan atribut gaya memungkinkan Anda juga mengatur gambar agar muncul dari kanan ke kiri. Artinya, gambar akan menempel di satu sisi dan akan tetap di sana
Image float set: right_
Image float set: left
Berbagai Atribut HTML Yang Sering Digunakan
Alt
Atribut Alt berguna untuk menyusun teks alternatif yang akan ditampilkan jika gambar tidak dapat ditampilkan. Anda dapat menamai atau mendeskripsikan gambar HTML untuk memberikan gambaran kepada pengguna tentang tampilan gambar tersebut
_Src
Atribut src mendefinisikan sumber tempat gambar tersebut diambil. Gambar HTML bisa ditempatkan di berbagai folder dari website Anda. Tag harus memiliki atribut src dengan jalur yang benar ke folder tertentu agar gambar Anda ditampilkan:
Sebagian besar file gambar HTML juga dapat diakses melalui alamat URL langsung. Untuk mengunggah gambar dari server lain, Anda harus memasukkan alamat URL di atribut src
Artikel Terkait Tutorial HTML/CSS 15. Kutip HTML, Berikan Kutipan atau Kutipan pada HTML
Gunakan peta
Dengan menggunakan usemap, Anda dapat menghubungkan gambar Anda dengan elemen untuk menentukan gambar peta