Adaptīvie attēli vai reaģējoši attēli ir metožu kombinācija, lai ielādētu pareizos attēlus, pamatojoties uz ekrāna izmēru vai ierīci. Adaptīvie attēli tiek automātiski pielāgoti atbilstoši dažādiem ekrāna izmēriem un ierīcēm. Adaptīviem attēliem ir jāizveido atšķirīgs izkārtojums katrai ierīcei, kurā tiks atvērta tīmekļa lapa. Adaptīvus attēlus var viegli izveidot, izmantojot CSS Flexbox. Flexbox ir CSS izkārtojuma viendimensijas modelis, kas veido rindas vai kolonnas. Flexbox ļauj vieglāk izveidot atsaucīgu struktūru.
Šī ziņa sniegs norādījumus, kā izveidot adaptīvus attēlus, izmantojot CSS Flexbox.
Kā izveidot adaptīvus attēlus, izmantojot CSS Flexbox?
Lai izveidotu adaptīvos attēlus, izmantojot CSS Flexbox, lietotājiem vispirms ir jāizveido HTML struktūra un pēc tam jāpiemēro CSS. Lai iegūtu praktisku demonstrāciju, veiciet tālāk norādītās procedūras.
Izveidojiet HTML struktūru
Izveidot a Vispirms izveidojiet Flexbox, iestatot “ displejs 'īpašuma vērtība uz ' flex 'iekšpusē' attēlu konteiners ” Pēc tam izmantojiet CSS attēliem, norādot “ img ” kopā ar “ .images-container ” nosaukums. Vispirms iestatiet ' flex 'īpašuma vērtība uz ' 1 ” lai vienmērīgi sadalītu pieejamo brīvo vietu starp attēliem. Pēc tam iestatiet “ maksimālais platums 'īpašuma vērtība uz ' 100% ”, lai nodrošinātu, ka attēli nepārsniedz to sākotnējo platumu. Iestatiet ' augstums 'īpašuma vērtība uz ' auto ”, lai saglabātu malu attiecību. Visbeidzot pievienojiet atstarpi starp attēliem, iestatot “ starpība 'īpašuma vērtība uz ' 10 pikseļi ”: Adaptīvie attēli, izmantojot CSS Flexbox, ir veiksmīgi izveidoti. Tālāk redzamais izvades skats ir pirms pārlūkprogrammas loga iesaiņojuma: Tagad iesaiņosim pārlūkprogrammas logu, lai pārbaudītu, vai attēls ir adaptīvs: Lai izveidotu adaptīvos attēlus ar CSS Flexbox, lietotājam vispirms ir jāizveido HTML struktūra, pēc tam jādefinē tagu. Iekšpusē
pievienojiet ' src ' tagu, lai norādītu attēla ceļu un pievienotu alternatīvo attēlu, izmantojot ' viss 'atzīme:
< div klasē = 'attēlu konteiners' >
< img src = 'attēls-1.jpg' viss = 'Pirmais attēls' >
< img src = 'attēls-2.jpg' viss = 'Otrais attēls' >
div >
Lietot CSS
displejs: flex ;
flex-wrap: wrap;
}
.images-container img {
flex: 1 ;
maksimālais platums: 100 % ;
augstums: auto;
piemale: 10 pikseļi;
}
Pirms aptinuma 
Pēc ietīšanas 
Iepriekš redzamais attēls apstiprina, ka pievienotie attēli ir adaptīvi. Secinājums
tagu. Pēc tam lietojiet CSS un CSS iekšpusē iestatiet rekvizītu “displejs” uz “ flex ”, lai izveidotu Flexbox. Šis raksts ir parādījis visaptverošu ceļvedi adaptīvu attēlu izveidei ar CSS Flexbox.