Postingan

Menampilkan postingan dengan label html

Skala Proporsional atau Pangkas Gambar Menggunakan CSS

Gambar
Bagaimana tidak kumaha kalian untuk merubah salah satu ukuran image atau pun gambar sehingga menjadi pas dan enak dilihat di dalam wadah ukuran sehingga menjadi tetap stabil jug a sesuai ukuran rasio aspeknya gaes,Coba kalian bisa apa enggak?.Untuk solusi nyata adalah mengatur lebar gambar, tinggi, lebar minimum dan / atau tinggi minimum gambar menjadi 100% atau otomatis. Namun, solusi ini tidak cukup umum untuk menangani gambar dengan rasio aspek yang bervariasi dengan benar. Berikut ini sebuah contoh: Batas hijau menunjukkan output yang diinginkan yaitu sesuai dengan gambar di dalam wadah (atau sebaliknya, isi wadah dengan gambar seperti yang ditunjukkan oleh batas merah). Jelas bahwa Anda perlu menggunakan aturan yang berbeda tergantung pada aspek rasio wadah dan gambar. CSS saja tidak dapat memilih aturan yang benar; Anda harus menggunakan JavaScript untuk menentukan apakah akan mencocokkan gambar secara horizontal atau vertikal. CSS3 memberikan (well, sort of): the: background...

Printing Wide HTML Tables

I built a report using HTML table that had more than two dozen columns. In fact, it was a matrix report where the number of rows and columns could grow indefinitely. The report looked perfect on the screen. However, upon printing, the browsers would print only the left portion of the table while the portion which does not fit on the page horizontally is discarded. I was not able to find a solution so I made a half-hearted attempt at this. My "solution": Create a fixed width div with hidden overflow Place a copy of the table inside this div Scroll the desired portion of the table into view using CSS positioning Repeat as many times necessary Below is a jQuery-powered demonstration of this idea. The output ( PDF , XPS ) is not perfect; but I am sure it can be improved. View source Open in new window In case you are wondering, the "accepted" solution was to export the table data as a Microsoft Excel/OpenOffice Calc document which provides more pr...