Adaptive billeder eller responsive billeder er en kombination af metoder til at indlæse de rigtige billeder baseret på skærmstørrelse eller enhed. Adaptive billeder bliver automatisk justeret i henhold til de forskellige skærmstørrelser og enheder. Adaptive billeder kræver oprettelse af et andet layout for hver enhed, som websiden vil blive tilgået på. Adaptive billeder kan nemt oprettes ved hjælp af CSS Flexbox. Flexbox er en CSS-layout en-dimensionel model, der opretter enten rækker eller kolonner. Flexbox gør det nemmere at skabe en responsiv struktur.
Dette indlæg vil give vejledning til at skabe adaptive billeder med CSS Flexbox.
Hvordan laver man adaptive billeder med CSS Flexbox?
For at skabe de adaptive billeder ved hjælp af CSS Flexbox skal brugere først oprette HTML-strukturen og derefter anvende CSS. For en praktisk demonstration skal du gennemgå procedurerne nedenfor.
Opret HTML-struktur
Lave en Først skal du oprette en Flexbox ved at indstille ' Skærm ' ejendomsværdi til ' bøje ' inde i ' billedbeholder ” Anvend derefter CSS på billederne ved at angive ' img ' sammen med ' .images-container ' navn. Indstil først ' bøje ' ejendomsværdi til ' 1 ” for at fordele den ledige plads mellem billeder ligeligt. Indstil derefter ' max-bredde ' ejendomsværdi til ' 100 % ” for at sikre, at billeder ikke overskrider deres oprindelige bredde. Indstil ' højde ' ejendomsværdi til ' auto ” for at bevare billedformatet. Til sidst skal du tilføje mellemrum mellem billeder ved at indstille ' margen ' ejendomsværdi til ' 10px ”: De adaptive billeder ved hjælp af CSS Flexbox er blevet oprettet med succes. Nedenstående outputvisning er før omslutningen af browservinduet: Lad os nu pakke browservinduet for at kontrollere, om billedet er adaptivt, er det ikke: For at skabe de adaptive billeder med CSS Flexbox skal brugeren først oprette HTML-strukturen og derefter definere tag. Inden i
tilføjes ' src ' tag for at angive billedstien og tilføje det alternative billede ved hjælp af ' alt ' tag:
< div klasse = 'billedbeholder' >
< img src = 'image-1.jpg' alt = 'Første billede' >
< img src = 'image-2.jpg' alt = 'Andet billede' >
div >
Anvend CSS
Skærm: bøje ;
flex-wrap: wrap;
}
.images-container img {
flex: 1 ;
max-bredde: 100 % ;
højde: auto;
margin: 10px;
}
Før indpakning 
Efter indpakning 
Ovenstående billede bekræfter, at de tilføjede billeder er adaptive. Konklusion
tag. Anvend derefter CSS, og inde i CSS sæt egenskaben 'display' til ' bøje ” for at skabe Flexbox. Denne artikel har demonstreret den omfattende guide til at skabe adaptive billeder med CSS Flexbox.