Tips Singkat: Buat Gambar Anda Fleksibel

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.

1

<div id="container">

2

    <div id="image">

3

    </div>

4

    <p>

5

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ullamcorper

6

        magna quis velit. Nam vitae dui et massa convallis vulputate. Aliquam ante magna,

7

        fermentum nec, scelerisque eget, semper quis, ipsum. Fusce consectetuer enim quis

8

        lorem. Morbi elit turpis, consequat ac, lacinia nec, dignissim ac, velit. Proin

9

        mauris orci, rutrum a, suscipit eu, sagittis et, nisi. Quisque at mi ac magna fermentum

10

        elementum.

11

    </p>

12

</div>

Step 2: Tambahkan CSS

1

#container

2

{

3

    width: 50%;

4

    margin: auto;

5

    padding: 1em;

6

    background: #3d332a;

7

    color: #b8ada2;  

8

}

9

10

#image

11

{

12

    height: 300px;

13

    background: url(Girl.jpg) no-repeat center;

14

}

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.

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