Saya punya banyak gambar di halaman, galeri. Saya ingin gambar tetap tajam, jadi saya tidak melakukan penskalaan browser, saya menggunakan dimensi asli gambar.
Namun, ini hanya berfungsi ketika tingkat pembesaran browser 100%. Saat saya menambah atau mengurangi level zoom, kualitas gambar menurun.
Beberapa klien sebenarnya memiliki level zoom yang berbeda secara default. Saya bertanya-tanya, bagaimana Anda bisa menanganinya dan apakah kami menanganinya?
Tepuk tangan
Jawaban:
Saya pikir sebagian besar jawaban lain telah melewatkan intinya: ini bukan tentang mengesampingkan preferensi pengguna, ini tentang memberikan gambar berkualitas terbaik dalam skenario umum perangkat pengguna yang menetapkan lebih dari satu piksel fisik untuk setiap piksel CSS alias " Pixel referensi "pada gambar Anda, menghasilkan browser yang memperbesar gambar, menjadikannya pixelated dan berbintik.
Solusi yang saya sarankan di bawah ini, tetapi pertama-tama inilah empat cara ini bisa terjadi:
width: 200px; height: 200px;
akan benar-benar skala gambar 200px x 200px di lebih dari 200 x 200 piksel, berpotensi menjadikannya buram.Semua ini akan menghasilkan masalah John pada galeri gambar yang tampak sangat kasar.
Saya berharap seseorang akan memiliki solusi yang bagus untuk masalah ini, tetapi untuk sekarang di sini adalah pilihan pilihan saya, dimulai dengan yang paling efektif tetapi paling tidak mungkin secara universal:
Jika 1. dan 2. tidak dimungkinkan, tetapi ini sangat penting dan kualitas gambar lebih penting daripada, katakanlah, waktu buka, cukup gandakan gambar.
Inilah yang dilakukan Google dengan logo mereka di beranda mereka: mereka menekan gambar PNG 538px x 190px dalam wadah 269px x 95px. Ini juga kurang lebih sama dengan cara kerja gambar responsif.
Ini dulunya dianggap praktik buruk karena versi lama IE mengerikan dalam menurunkan gambar, tetapi sekarang sangat jarang digunakan dan jauh lebih jarang daripada layar dengan kepadatan piksel tinggi. Ini masih agak tidak diinginkan karena akan meningkatkan ukuran gambar dan karenanya menambah waktu pengambilan - itu adalah pertukaran yang Anda perlukan untuk menilai kasus per kasus.
sumber
Sebagai DA01 berkomentar Anda tidak boleh melakukan apa-apa tentang itu.
Zoom adalah opsi yang ditentukan pengguna dan karenanya berada di bawah kendali mereka. Pengaturan yang mereka putuskan untuk diacaukan bukanlah tanggung jawab Anda.
Anda dapat memperhitungkan berbagai browser dan versi dan apa yang tidak, tetapi secara wajar Anda tidak harus memperhitungkan zoom pengguna.
Tentu Anda dapat mencapai 125% atau 150% (dan Anda bahkan mungkin tidak harus melakukannya). Tetapi 200%, 300%, lebih banyak? Itu tidak masuk akal.
Bagaimana jika pengguna menggunakan tema windows kontras tinggi? Bagaimana jika mereka terus menggunakan kaca pembesar? Siapa peduli?
Idealnya situs web Anda cukup fleksibel sehingga tidak membuat perbedaan nyata antara perbedaan zoom kecil, tetapi kualitas gambar akan menurun dengan zoom tetapi itu bukan tanggung jawab Anda.
Ini tentu saja hanya pendapat saya tetapi perusahaan tempat saya bekerja juga secara eksplisit memberi tahu pelanggan bahwa kami tidak mendukung preferensi zoom mereka.
sumber
Orang lain telah memberikan beberapa tips hebat tentang masalah yang akan Anda hadapi dan saya tidak cukup baik di bidang ini untuk melakukan tutorial yang baik tetapi ...
Anda mungkin ingin merancang situs responsif yang menyesuaikan sesuai dengan res / perangkat pengguna dan kemudian Anda mungkin mencari kode yang akan mengalihkan gambar ke file res yang lebih tinggi atau lebih rendah ketika diminta, daripada meregangkan dan meremas gambar yang Anda miliki.
Ketika saya terakhir mencoba melakukan ini, saya menggunakan media-query.js dan picturefill.js. Lihat: http://responsivedesign.is/resources/images/picture-fill . Saya memiliki tata letak 3 kolom di mana beberapa gambar akan menjangkau dua kolom ... Ketika jendela browser dibuat cukup kecil, gambar besar akan beralih ke versi res yang lebih kecil yang hanya akan menjadi satu lebar kolom. Browser pengguna hanya akan memuat versi file yang mereka butuhkan. (dan dalam kasus saya, plugin pasangan batu akan memindahkan semuanya untuk mengakomodasi).
Tentu saja pengguna Anda harus mengaktifkan javascript ...
sumber
Anda tidak bisa memaksa tangan pengguna. Pengaturan pengguna bukan milik Anda untuk bermain. Pengaturan dan mengelak dari mereka adalah ide yang buruk mungkin ada alasan mengapa pengguna melakukan sesuatu. Dalam kedua kasus Anda tidak dapat menjamin apa pun di berbagai perangkat.
Bahkan jika Anda masuk ke sisi teknis, itu menjadi lebih menarik. Anda benar-benar memberikan kunci kerajaan dengan halaman web Anda. Lihat pengguna mengunduh halaman web dan pengguna sekarang dapat melakukan apa pun yang mereka suka dengannya. Anda tidak memiliki kontrol atas lapisan ini, ini setelah semua berjalan di mesin pengguna dan mereka dapat melakukan apa pun yang mereka mau. Bahkan stackexhange tidak terlihat sama di komputer / ponsel saya seperti pada Anda. Saya mengubah beberapa aspek GUI pada akhirnya secara otomatis, untuk memperbaiki 2 render bug dan telah menambahkan 2 pintasan.
sumber
Perilaku menjengkelkan peningkatan gambar pada layar HiDPI, yang mengarah pada foto buram (alias mimpi buruk fotografer), juga telah mengganggu saya selama beberapa waktu. Saya juga bertanya-tanya bahwa tidak ada atribut CSS sederhana untuk menonaktifkannya untuk gambar.
Solusi saya saat ini dengan CSS terlihat seperti ini:
Langkah selanjutnya adalah menggunakan kelas untuk menentukan dan mengatur ukuran gambar yang berbeda jika diperlukan. Saya tidak tahu cara untuk mendapatkan ukuran gambar secara dinamis. Fungsi CSS attr () tampaknya tidak berfungsi untuk ini.
sumber
Jadi ini akan lebih merupakan pertanyaan pemrograman. Tetapi menggunakan JQuery, atau bahkan hanya pesawat css Anda dapat menampilkan gambar yang berbeda berdasarkan lebar layar pengguna, tinggi layar dan sebagainya.
Sekali lagi meskipun ini mungkin bukan stackexchange untuk bertanya.
sumber
Anda cukup melakukan ini melalui HTML di kepala situs tambahkan ini
Ini tidak disarankan oleh pengembang untuk setiap jenis situs tetapi harus memenuhi apa yang Anda minta.
sumber
Semoga bisa membantu: css rule transform: skala pada tag tubuh atau lainnya - tidak sempurna lihat di sini, silakan:
/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741
sumber