Ja se si të shtoni imazhe të projektimit të përgjegjshëm duke përdorur CSS
Shikoni faqet e internetit të njohura sot dhe një trajtim dizajni për të cilin jeni i sigurt për të parë është një imazh i madh i ekranit. Një nga sfidat me shtimin e këtyre imazheve vjen nga praktika më e mirë që faqet e internetit duhet t'u përgjigjen madhësive dhe pajisjeve të ndryshme të ekranit - një qasje e njohur si dizajni i përgjegjshëm i uebit .
Meqenëse ndryshimet e faqeve të faqeve të internetit ndryshojnë dhe shkallët me madhësi të ndryshme të ekranit, ashtu edhe këto imazhe sfondi duhet të zvogëlohen në përputhje me rrethanat.
Në fakt, këto "imazhe fluide" janë një nga pjesët kyçe të faqeve të përgjegjshme (së bashku me një rrjet të lëngshëm dhe pyetje mediale). Këto tre pjesë kanë qenë një element kryesor i dizajnit të përgjegjshëm të web-it që nga fillimi, por përderisa gjithmonë ka qenë mjaft e lehtë për të shtuar imazhe të përgjegjshme inline në një vend (imazhet inline janë grafika të koduara si pjesë e HTML markup), duke bërë të njëjta me imazhet e sfondit (të cilat janë të dizajnuara në faqe duke përdorur pronat e sfondit të CSS) kanë dhënë kohë të gjatë një sfidë të rëndësishme për shumë dizajnerë të internetit dhe zhvilluesit e përparësive. Fatmirësisht, shtimi i pronës "background-size" në CSS e ka bërë të mundur këtë.
Në një artikull të veçantë, unë mbulova se si të përdorim madhësinë e sfondit të pronës së CSS3 për të shtrirë imazhet që të përshtaten në një dritare, por ka një mënyrë edhe më të mirë dhe më të dobishme për t'u vendosur për këtë pronë. Për ta bërë këtë, do të përdorim kombinimin e mëposhtëm të pronës dhe vlerës:
background-size: mbuluar;
Pronë e fjalës së mbuluar i tregon shfletuesit të shkurtojë imazhin për të përshtatur dritaren, pavarësisht se sa i madh apo i vogël që merr dritarja. Imazhi është i shkallëzuar për të mbuluar tërë ekranin, por përmasat origjinale dhe raportet e aspekteve mbahen të paprekura, duke penguar që imazhi të jetë i shtrembëruar.
Imazhi vendoset në dritare sa më i madh që është e mundur në mënyrë që sipërfaqja e dritares të mbulohet. Kjo do të thotë që nuk do të keni ndonjë njollë të zbrazët në faqen tuaj ose ndonjë shtrembërim të imazhit, por gjithashtu do të thotë që disa nga imazhet mund të shkëputen varësisht nga proporcioni i pamjes së ekranit dhe imazhit në fjalë. Për shembull, skajet e një imazhi (ose lart, poshtë, majtas ose djathtas) mund të priten në imazhe, në varësi të vlerave që përdorni për pozicionin e pozicionit të sfondit. Nëse orientoni sfondin në "majën e majtë", çdo tejkalim i imazhit do të dalë nga anët e poshtme dhe të djathta. Nëse përqendrohesh në imazhin e sfondit, e tepërta do të dalë nga të gjitha anët, por meqë kjo e tepërt është e shpërndarë, ndikimi në cilëndo anë do të jetë më pak i shërbyer.
Si të përdorni madhësinë e sfondit: mbuloni;
Kur krijoni imazhin tuaj të sfondit, është një ide e mirë për të krijuar një imazh mjaft të madh. Ndërsa shfletuesit mund të bëjnë një imazh më të vogël pa një ndikim të dukshëm në cilësinë vizuale, kur një shfletues zmadhon një imazh në një madhësi më të madhe se sa dimensione origjinale, cilësia vizuale do të degradohet, duke u bërë e paqartë dhe me pixelated. Dobësitë në këtë është se faqja juaj merr një goditje të performancës kur po jepni imazhe gjigante në të gjitha ekranet.
Kur ta bëni këtë, sigurohuni që të përgatisni siç duhet ato imazhe për shpejtësinë e shkarkimit dhe shpërndarjen e uebit . Në fund, ju duhet të gjeni mesazhin e lumtur midis një madhësie të madhe imazhi dhe cilësie dhe një madhësi të arsyeshme të skedarëve për shpejtësinë e shkarkimit.
Një nga mënyrat e zakonshme për të përdorur imazhet e sfondit të sfondit është kur doni që imazhi të marrë sfondin e plotë të një faqe, nëse kjo faqe është e gjerë dhe që shikohet në një kompjuter desktop ose shumë më të vogla dhe po dërgohet në një dore, pajisje.
Ngarko imazhin tuaj në web host tuaj dhe shtoni atë në CSS tuaj si një imazh sfond:
background-image: url (fishekzjarre-mbi-wdw.jpg);
përsëritje e sfondit: jo-përsëritje;
background-position: qendra qendrore;
background-attachment: fikse;
Shtoni paraprakisht shfletuesin paraprak CSS:
-webkit-background-size: mbulon;
-moz-background-size: mbuluar;
-o-background-size: mbulon;
Pastaj shtoni pronë CSS:
background-size: mbuluar;
Përdorimi i imazheve të ndryshme që i përshtaten pajisjeve të ndryshme
Ndërsa dizajni i përgjegjshëm për një përvojë desktop apo laptop është e rëndësishme, shumëllojshmëria e pajisjeve që mund të hyjnë në Web është rritur dukshëm dhe një shumëllojshmëri më e madhe e madhësive të ekranit vjen me këtë.
Siç u përmend më parë, ngarkimi i një imazhi shumë të madh të sfondit të sfondit në një smartphone, për shembull, nuk është një dizajn efikas ose i ndërgjegjshëm për bandwidth.
Mësoni se si mund t'i përdorni pyetjet e medias për t'i shërbyer imazheve që do të jenë të përshtatshme për pajisjet ku do të shfaqen dhe për të përmirësuar më tej përputhshmërinë e internetit me pajisjet mobile.
Artikulli origjinal nga Jennfier Krynin. Redaktuar nga Jeremy Girard 9/12/17