Di dieu nu kumaha pikeun nambahkeun gambar desain responsif maké CSS
Tingali di situs web populer dinten na hiji perlakuan desain nu yakin ningali anu badag, gambar tukang layar-Manjang. Salah sahiji tantangan jeung nambahkeun gambar ieu asalna tina praktek pangalusna anu jaba kudu ngabales ukuran layar béda jeung alat - hiji pendekatan dipikawanoh salaku desain web responsif .
Kusabab parobahan perenah ramatloka anjeun na skala kalayan ukuran layar béda, jadi teuing kudu Gambar tukang ieu skala ukuran maranéhanana sasuai.
Kanyataanna, ieu "Gambar cairan" téh salah sahiji buah konci situs web responsif (sapanjang ku grid cairan sarta queries média). Maranéhanana tilu potong geus pokok desain web responsif saprak awal, tapi bari geus salawasna geus cukup gampang pikeun nambahkeun gambar inline responsif kana situs anu (Gambar inline anu grafik nu disandi salaku bagian tina aksara HTML), ngalakonan sarua jeung gambar tukang (nu styled kana kaca ngagunakeun sipat tukang CSS) geus lila disadiakeun tangtangan signifikan pikeun loba web désainer sarta pamekar tungtung hareup. Thankfully, ditambah ti "tukang-ukuran" harta di CSS geus nyieun ieu mungkin.
Dina artikel misah, abdi ditutupan cara migunakeun harta CSS3 tukang-ukuran jeung manteng gambar pikeun pas dina jandela, tapi aya hiji malah hadé, jalan langkung mangpaat nyebarkeun keur sipat ieu. Jang ngalampahkeun ieu, urang bakal make sipat na nilai kombinasi handap:
tukang-ukuran: panutup;
Harta panutup keyword ngabejaan browser pikeun skala gambar pikeun nyocogkeun jandela, paduli sabaraha badag atanapi leutik nu jandela meunang. Gambar nu ieu diskalakeun nutupan sakabéh layar, tapi babandingan aslina tur rasio aspék anu diteundeun gembleng, ngahulag gambar sorangan ti keur menyimpang.
gambar nu ieu disimpen dina jandéla saperti badag salaku kamungkinan supaya sakabéh beungeut jandela katutupan. Ieu ngandung harti yén anjeun moal ngagaduhan spot kosong dina kaca anjeun atanapi distorsi wae dina gambar, tapi eta oge ngandung harti yén sababaraha gambar nu bisa jadi dipangkas kaluar gumantung kana rasio aspék layar tur gambar sual. Contona, edges of hiji gambar (boh luhur, handap, ka kénca, atawa katuhu) bisa jadi neukteuk off dina gambar, gumantung kana anu peunteun maneh make keur milik tukang-posisi. Lamun Orient tukang keur "kénca luhur", sagala kaleuwihan dina gambar bakal datangna kaluar handap jeung sisi katuhu. Lamun pusat gambar latar, kaleuwihan bakal datangna kaluar tina sagala sisi, tapi saprak kaleuwihan anu nyebarkeun kaluar, dampak kana sagala salah sisi bakal kirang Preanger.
Kumaha Paké latar-ukuran: nutupan;
Nalika nyieun gambar tukang anjeun, éta mangrupakeun ide nu sae pikeun nyieun hiji gambar nu geus cukup badag. Bari panyungsi tiasa ngadamel hiji gambar leutik tanpa dampak noticeable on kualitas visual, nalika browser hiji timbangan up hiji gambar ka ukuranana leuwih badag batan éta dimensi aslina, kualitas visual bakal didegradasi, jadi rumeuk tur pixelated. The downside kana ieu that page anjeun nyokot hit kinerja sawaktos Anjeun keur delivering Gambar buta ka sadaya layar.
Lamun anjeun ngalakukeun ieu, pastikeun pikeun leres nyiapkeun Gambar jalma keur speed download sarta pangiriman web . Dina tungtung, Anjeun kudu neangan nu sedeng senang antara hiji ukuran badag cukup gambar na kualitas sarta ukuranana file lumrah pikeun speeds download.
Salah sahiji cara biasa ngagunakeun gambar tukang skala nyaéta nalika rék gambar nu nyandak up tukang pinuh ku kaca, naha kaca nu geus lega sarta ditempo dina komputer desktop atawa leuwih leutik tur keur dikirim ka handheld, mobile alat.
Unggah gambar anjeun ka host wéb anjeun sarta tambahkeun ka CSS anjeun salaku gambar latar:
tukang-gambar: url (petasan-leuwih-wdw.jpg);
tukang-ulang: no-ulang;
tukang-posisi: puseur puseur;
tukang-kantétan: dibereskeun;
Tambahkeun browser prefixed CSS mimiti:
-webkit-tukang-ukuran: panutup;
-moz-tukang-ukuran: panutup;
-o-tukang-ukuran: panutup;
Lajeng nambahkeun harta CSS:
tukang-ukuran: panutup;
Ngagunakeun Gambar Béda jas Éta varying Alat
Bari design responsif pikeun desktop atawa pangalaman laptop penting, éta rupa-rupa alat nu bisa ngakses Web geus dipelak nyata, sarta rupa-rupa leuwih gede ukuran layar hadir kalawan éta.
Sakumaha didadarkeun di saméméhna, loading hiji gambar tukang responsif kacida gedéna di smartphone, contona, teu hiji rarancang efisien atanapi rubakpita-sadar.
Diajar kumaha anjeun tiasa nganggo queries média ngawula gambar anu bakal luyu jeung alat maranéhna bakal dipintonkeun dina, sareng salajengna ningkatkeun kasaluyuan ramatloka anjeun kalawan alat nu bagerak.
Aslina artikel ku Jennfier Krynin. Diédit ku Jeremy Girard 9/12/17