Adaptīvs attēls ir tāds, kas var pielāgoties dažādām ierīcēm neatkarīgi no ekrāna izmēra. Responsīvs attēls vietnē mūsdienās ir kļuvis ļoti svarīgs. Tā kā tas ne tikai paātrina vietni, bet arī piedāvā lielisku lietotāja pieredzi visās ierīcēs. Mainot pārlūkprogrammas izmērus, tiks mainīts arī adaptīvo attēlu izmērs.
Atsaucīgi attēli efektīvi pielāgojas dažādiem ekrāna izmēriem dažādās ierīcēs. Tas nodrošina kvalitātes saglabāšanu. Adaptīva vietne ar adaptīviem attēliem noteikti palielina iesaisti un reklāmguvumu līmeni. Attēlus var padarīt atsaucīgus, izmantojot CSS un multivides vaicājumus.
Šajā pierakstā tiks izmantots HTML un CSS, lai padarītu attēlus atsaucīgus.
Kā padarīt attēlus atsaucīgus, izmantojot HTML un CSS?
Lai padarītu attēlus adaptīvus, izmantojot HTML un CSS, veiciet tālāk norādītās darbības.
- Izmantojiet rekvizītu “maksimālais platums”.
- Izmantojiet rekvizītu “platums”.
- Lietot multivides vaicājumus.
1. metode: izmantojiet rekvizītu “maksimālais platums”.
Pirmā metode, kā padarīt attēlu atsaucīgu, ir izmantot “ maksimālais platums ” īpašums. ' maksimālais platums Rekvizīts tiek izmantots, lai definētu attēla maksimālo platumu. Ja saturs pārsniedz maksimālo platumu, tas mainīs elementa augstumu.
Izveidojiet HTML
Lai pievienotu attēla failu HTML tagā
, lietotājiem ir jāizmanto tagsPievienojiet CSS
Tagad izveidojiet ārēju CSS failu, saglabājiet to ar “. css ” faila paplašinājumu un saiti to HTML faila tagā
. Lai veidotu attēla failu CSS failā, sāciet ar img tagu un atveriet cirtainās iekavas. Pēc tam cirtainajā lencē pievienojiet ' maksimālais platums: 100% ;” lai attēlu ievietotu konteinerā horizontāli. Turklāt tas novērsīs attēlu izgriešanu. Pēc tam pievienojiet ' augstums: auto ;” lai automātiski pielāgotu augstumu, lai attēls tiktu parādīts pareizi:img {
maksimālais platums : 100% ;
augstums : auto ;
}
Mainiet pārlūkprogrammas loga izmērus, lai pārbaudītu attēla mērogošanu.
2. metode: izmantojiet rekvizītu “width”.
Vēl viena metode, kā padarīt attēlu atsaucīgu, ir izmantot rekvizītu ' platums ”. Īpašums ' platums ” nosaka attēlu un teksta platumu. Tas nesatur piemales, polsterējumu vai apmales. Tas var iestatīt attēlu un teksta lielumu formātā cm, px vai %. Lai padarītu attēlu atsaucīgu, vienkārši piešķiriet ' platums ' īpašums uz ' 100 %”. Iestatījums ' platums: 100% ;” nozīmē, ka attēls ir tikpat liels kā vecākelements:
img {platums : 100% ;
augstums : auto ; }
Iepriekš minētais apstiprina, ka attēls ir atsaucīgs. Lai pārbaudītu, vai tas ir vai nē, vienkārši mainiet pārlūkprogrammas loga izmēru.
3. metode: izmantojiet multivides vaicājumus
CSS multivides vaicājumi palīdz lietotājiem mainīt tīmekļa lapas izskatu. CSS multivides vaicājumā ir ietverti nosacījumi, ja šie nosacījumi tiks izpildīti, tas mainīs ierīces vai pārlūkprogrammas izskatu. Multivides vaicājumi var arī palīdzēt lietotājiem padarīt attēlus atsaucīgus. Šī iemesla dēļ vispirms norādiet “@ plašsaziņas līdzekļi ' tagu un pēc tam norādiet ' maksimālais platums ” rekvizītu un piešķiriet attēlam maksimālo platumu iekavās. Ikreiz, kad šis nosacījums tiks izpildīts, attēls reaģēs. Pēc tam pievienojiet cirtainās iekavas, norādiet img tagu un norādiet “ platums: 100% ;” vērtība:
@media ( maksimālais platums : 480 pikseļi ) {img {
platums : 100% ;
}
}
Piezīme : attēls būs atsaucīgs tikai tad, ja tas atbildīs norādītajam nosacījumam.
CSS multivides vaicājums ir lietots, un tagad attēls darbotos kā atsaucīgs, ja tā izmērs tiktu mainīts līdz norādītajam attēla izmēram. Citādi tas nereaģēs:
Secinājums
Lai padarītu attēlus atsaucīgus ar HTML un CSS, lietotājiem ir dažādas metodes. Šīs metodes ietver attēlu reaģēšanu, izmantojot maksimālais platums 'īpašums', ' platums ” īpašumu, kā arī izmantojot CSS multivides vaicājumu. Šis raksts ir iepazīstinājis lietotājus ar pilnu risinājumu, lai padarītu attēlus atsaucīgus.