Adaptiva bilder eller responsiva bilder är en kombination av metoder för att ladda rätt bilder baserat på skärmstorlek eller enhet. Adaptiva bilder justeras automatiskt efter de olika skärmstorlekarna och enheterna. Adaptiva bilder kräver att man skapar en annan layout för varje enhet som webbsidan kommer att nås på. Adaptiva bilder kan enkelt skapas med CSS Flexbox. Flexbox är en endimensionell CSS-layoutmodell som skapar antingen rader eller kolumner. Flexbox gör det enklare att skapa en responsiv struktur.
Det här inlägget kommer att ge vägledning för att skapa adaptiva bilder med CSS Flexbox.
Hur skapar man adaptiva bilder med CSS Flexbox?
För att skapa de adaptiva bilderna med CSS Flexbox måste användare först skapa HTML-strukturen och sedan tillämpa CSS. Gå igenom procedurerna nedan för en praktisk demonstration.
Skapa HTML-struktur
Skapa en Skapa först en Flexbox genom att ställa in ' visa ' egenskapens värde till ' böja ' inuti ' bild-behållare ” Applicera sedan CSS på bilderna genom att ange ' img ' tillsammans med ' .images-container ' namn. Ställ först in ' böja ' egenskapens värde till ' 1 ” för att fördela det tillgängliga lediga utrymmet mellan bilder lika. Ställ sedan in ' maximal bredd ' egenskapens värde till ' 100 % ' för att säkerställa att bilder inte överskrider sin ursprungliga bredd. Ställ in ' höjd ' egenskapens värde till ' bil ' för att bibehålla bildförhållandet. Lägg slutligen till avstånd mellan bilderna genom att ställa in ' marginal ' egenskapens värde till ' 10px ”: De adaptiva bilderna med CSS Flexbox har skapats framgångsrikt. Nedanstående utgångsvy är före avslutningen av webbläsarfönstret: Låt oss nu slå in webbläsarfönstret för att kontrollera om bilden är adaptiv inte: För att skapa de adaptiva bilderna med CSS Flexbox måste användaren först skapa HTML-strukturen och sedan definiera märka. Inuti
lägg till ' src ' taggen för att ange bildsökvägen och lägg till den alternativa bilden med hjälp av ' allt ' tag:
< div klass = 'bild-behållare' >
< img src = 'bild-1.jpg' allt = 'Första bilden' >
< img src = 'image-2.jpg' allt = 'Andra bilden' >
div >
Använd CSS
visa: böja ;
flex-wrap: wrap;
}
.images-container img {
böja: 1 ;
maximal bredd: 100 % ;
höjd: auto;
marginal: 10px;
}
Innan Wrap 
Efter Wrap 
Bilden ovan bekräftar att bilderna som lagts till är adaptiva. Slutsats
märka. Applicera sedan CSS och inuti CSS ställ in egenskapen 'display' till ' böja ” för att skapa Flexbox. Den här artikeln har visat den omfattande guiden för att skapa adaptiva bilder med CSS Flexbox.