Cara menggunakan css untuk gambar

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;
}

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;
}

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%);
}

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%;
}
}

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

Bagaimana cara menautkan gambar dan CSS pada HTML?

Untuk apa CSS digunakan?

Bahasa apa yang digunakan CSS?

Bagaimana cara menyisipkan gambar ke halaman web?