Adaptieve afbeeldingen of responsieve afbeeldingen zijn een combinatie van methoden om de juiste afbeeldingen te laden op basis van schermgrootte of apparaat. Adaptieve afbeeldingen worden automatisch aangepast aan de verschillende schermformaten en apparaten. Adaptieve afbeeldingen vereisen het creëren van een andere lay-out voor elk apparaat waarop de webpagina wordt geopend. Adaptieve afbeeldingen kunnen eenvoudig worden gemaakt met CSS Flexbox. Flexbox is een eendimensionaal CSS-lay-outmodel dat rijen of kolommen maakt. Flexbox maakt het eenvoudiger om een responsieve structuur te creëren.
Dit bericht biedt richtlijnen voor het maken van adaptieve afbeeldingen met CSS Flexbox.
Hoe maak je adaptieve afbeeldingen met CSS Flexbox?
Om de adaptieve afbeeldingen te maken met behulp van CSS Flexbox moeten gebruikers eerst de HTML-structuur maken en vervolgens CSS toepassen. Voor een praktische demonstratie doorloopt u de onderstaande procedures.
Creëer een HTML-structuur
Maak een Maak eerst een Flexbox aan door de “ weergave “waarde van onroerend goed naar “ buigen ' binnen in de ' afbeelding-container ” Pas vervolgens CSS toe op de afbeeldingen door de “ afb ' samen met de ' .images-container ' naam. Stel eerst de “ buigen “waarde van onroerend goed naar “ 1 ” om de beschikbare vrije ruimte gelijkmatig over de afbeeldingen te verdelen. Stel vervolgens de “ Maximale wijdte “waarde van onroerend goed naar “ 100% ” om ervoor te zorgen dat afbeeldingen hun oorspronkelijke breedte niet overschrijden. Stel de ' hoogte “waarde van onroerend goed naar “ auto ” om de beeldverhouding te behouden. Voeg ten slotte de afstand tussen afbeeldingen toe door de “ marge “waarde van onroerend goed naar “ 10px ”: De adaptieve afbeeldingen met CSS Flexbox zijn met succes gemaakt. De onderstaande uitvoerweergave is vóór de afsluiting van het browservenster: Laten we nu het browservenster omsluiten om te controleren of de afbeelding adaptief is: Om de adaptieve afbeeldingen met CSS Flexbox te maken, moet de gebruiker eerst de HTML-structuur maken en vervolgens de label. Voeg binnen de
de “ src ”-tag om het afbeeldingspad op te geven en de alternatieve afbeelding toe te voegen met behulp van de “ alles ' label:
< div klas = 'afbeeldingencontainer' >
< afb src = 'afbeelding-1.jpg' alles = 'Eerste afbeelding' >
< afb src = 'afbeelding-2.jpg' alles = 'Tweede afbeelding' >
div >
CSS toepassen
weergave: buigen ;
flex-wrap: wikkel;
}
.images-container img {
buigen: 1 ;
Maximale wijdte: 100 % ;
hoogte: automatisch;
marge: 10px;
}
Vóór omslag 
Na omslag 
De bovenstaande afbeelding bevestigt dat de toegevoegde afbeeldingen adaptief zijn. Conclusie
label. Pas vervolgens de CSS toe en stel binnen de CSS de eigenschap “display” in op “ buigen ” om Flexbox te creëren. Dit artikel heeft de uitgebreide handleiding gedemonstreerd voor het maken van adaptieve afbeeldingen met CSS Flexbox.