Ketika kami pergi melalui wawancara, kami sering ditanya tentang tata letak. Seringkali mereka turun untuk mencantumkan nilai properti tampilan atau cara memusatkan elemen. Ini terus terang mengganggu saya, dan saya ingin menyelesaikan tugas saya sendiri, dengan bantuan yang saya dapat menguji keterampilan tata letak, dan bukan bagaimana dia menghafal nilai properti.
Deskripsi tugas
Seringkali, ketika saya membaca artikel di Internet, saya menghadapi masalah berikut: teks mulai melompat ketika gambar dimuat.
Salah satu solusi untuk masalah ini adalah menambahkan placeholder untuk gambar, di mana rasio lebar dan tinggi akan mengulangi aspek rasio gambar.
Saya akan memulai implementasinya dengan markup:
<div class="post"> <img src="example.jpg" class="post__img" alt=" "> </div>
Untuk mengatur dimensi placeholder, Anda perlu mengetahui rasio aspek gambar. Sebagai contoh saya akan menggunakan ukuran gambar 1920x1080px.
Tetapi jika Anda menampilkan gambar sebesar ini, maka pada sebagian besar layar itu akan ditampilkan dengan pengguliran horizontal. Oleh karena itu, saya akan mengatur elemen .post ke lebar maksimum 640px, dan lebar gambar akan menyesuaikannya.
.post { max-width: 640px; } .post__img { max-width: 100%; }
Saya akan menambahkan placeholder ke halaman menggunakan elemen pseudo sebelumnya. Anda juga harus ingat untuk menempatkan gambar di atasnya.
.post { max-width: 640px; position: relative; } .post::before { content: ""; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Sekarang Anda membutuhkan lebar placeholder untuk mengulangi lebar gambar. Sebelumnya, saya membuat gambar menempati 100% dari lebar elemen .post induk. Saya akan melakukan hal yang sama untuk elemen pseudo sebelumnya dengan menambahkan display: block to it.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Teman, dalam hal ini saya menyelesaikan bagian pekerjaan saya, dan bagian Anda tetap ada. Anda perlu menghitung ketinggian elemen pseudo sebelum.
Untuk melakukan ini, gunakan properti padding-top dengan nilai persentase. Untuk melakukan ini dengan benar, Anda perlu mengetahui keanehan dalam menghitung bunga di properti padding-top. Dan juga ingat bahwa ukuran gambar adalah 1920x1080px.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Saya harap Anda mencoba menyelesaikan masalah ini sendiri. Tetapi jika kesulitan muncul, ada solusi saya di bawah ini.
Solusi
Properti padding-top dan padding-bottom memiliki satu fitur yang sangat berguna. Jika Anda menetapkan nilai dalam persentase, mereka akan dihitung dari lebar blok induk.
Dengan demikian, mengetahui ini dan mengingat ukuran gambar (1920x1080px), Anda bisa menghitung padding-top untuk placeholder menggunakan proporsi:
padding-top = ( * 100%) / = (1080 * 100% ) / 1920 = 56.25%
di mana Shi dan Vi adalah lebar dan tinggi gambar.
Tetap menambahkan nilai untuk padding-top:
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; padding-top: 56.25%; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }