Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Tips Singkat: Buat Gambar Anda Fleksibel

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Haikal Kamil (you can also view the original English article)

Salah satu alasan mencolok mengapa banyak developer memilih fixed-width di atas situs elastic adalah karena menggunakan gambar inline dapat merusak layout situs - mirip seperti kawanan ternak yang berulang kali menendang Anda di selangkangan. Hal itu sama sekali tidak menyenangkan. Tentu, Anda dapat menentukan lebarnya menggunakan persentase atau em, tetapi metode itu tidak ideal. Dalam kasus seperti itu, mengapa tidak mencoba menggunakan teknik background?




Step 1: Set Up HTML

Pertama, mari kita buat file html yang sangat sederhana.

Step 2: Tambahkan CSS

Agar div container kami menjadi fleksibel, saya telah mengatur lebarnya menjadi 50% dari jendela browser. Selanjutnya, saya telah mengatur margin ke auto untuk memusatkan kontennya. Padding, background, dan color hanyalah gaya estetika.

Tag div dengan id "image" adalah tempat kami akan menambahkan background gambar. Kuncinya di sini adalah bahwa saya tidak menetapkan width spesifik untuk gambar - hanya height-nya. Saat Anda menambahkan gambar sebagai background, Anda harus memastikan bahwa Anda "center" gambar itu (no-repeat center). Ini, pada dasarnya, akan memaksa fokus utama gambar Anda ditampilkan setiap saat. *Catatan - Pastikan Anda menggunakan gambar yang memiliki titik fokus utama di tengah.

Anda Sudah Selesai

Lihat pekerjaan Anda di browser dan coba tambah dan kurangi jendela browsernya. Ada beberapa hal yang perlu diingat ketika menggunakan metode ini.

  • Pastikan Anda menggunakan gambar selebar yang diperlukan.
  • Pusat gambar Anda harus menjadi titik fokus.
  • Tengahkan gambar terhadap background.
  • Pertimbangkan untuk membuat maximum width div container Anda sama dengan full width dari gambar.
  • Selain itu, pertimbangkan untuk menambahkan width minimum untuk memastikan gambar Anda tidak menyusut terlalu banyak.
Final Product

Selamat berakhir pekan. Mari kita bertemu kembali di hari Senin! Omong-omong, pastikan untuk follow kami di TWITTER!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.