అనుకూల చిత్రాలు లేదా ప్రతిస్పందించే చిత్రాలు స్క్రీన్ పరిమాణం లేదా పరికరం ఆధారంగా సరైన చిత్రాలను లోడ్ చేసే పద్ధతుల కలయిక. వివిధ స్క్రీన్ పరిమాణాలు మరియు పరికరాలకు అనుగుణంగా అనుకూల చిత్రాలు స్వయంచాలకంగా సర్దుబాటు చేయబడతాయి. అనుకూల చిత్రాలకు వెబ్ పేజీని యాక్సెస్ చేసే ప్రతి పరికరం కోసం వేరే లేఅవుట్‌ని సృష్టించడం అవసరం. CSS ఫ్లెక్స్‌బాక్స్‌ని ఉపయోగించి అనుకూల చిత్రాలను సులభంగా సృష్టించవచ్చు. Flexbox అనేది అడ్డు వరుసలు లేదా నిలువు వరుసలను సృష్టించే CSS లేఅవుట్ వన్ డైమెన్షనల్ మోడల్. Flexbox ప్రతిస్పందించే నిర్మాణాన్ని సృష్టించడాన్ని సులభతరం చేస్తుంది.
ఈ పోస్ట్ CSS ఫ్లెక్స్‌బాక్స్‌తో అనుకూల చిత్రాలను రూపొందించడానికి మార్గదర్శకత్వాన్ని అందిస్తుంది.
CSS ఫ్లెక్స్‌బాక్స్‌తో అనుకూల చిత్రాలను ఎలా సృష్టించాలి?
CSS ఫ్లెక్స్‌బాక్స్ ఉపయోగించి అనుకూల చిత్రాలను రూపొందించడానికి వినియోగదారులు ముందుగా HTML నిర్మాణాన్ని సృష్టించి, ఆపై CSSని వర్తింపజేయాలి. ఆచరణాత్మక ప్రదర్శన కోసం దిగువ అందించిన విధానాలను అనుసరించండి.
HTML నిర్మాణాన్ని సృష్టించండి
సృష్టించు a ముందుగా, “ని సెట్ చేయడం ద్వారా ఫ్లెక్స్‌బాక్స్‌ను సృష్టించండి ప్రదర్శన 'ఆస్తి విలువ' ఫ్లెక్స్ 'లోపల' చిత్రం కంటైనర్ ” తరువాత, ''ని పేర్కొనడం ద్వారా చిత్రాలకు CSSని వర్తింపజేయండి img 'తో పాటు' .చిత్రాలు-కంటైనర్ 'పేరు. మొదట, 'ని సెట్ చేయండి ఫ్లెక్స్ 'ఆస్తి విలువ' 1 ” చిత్రాల మధ్య అందుబాటులో ఉన్న ఖాళీ స్థలాన్ని సమానంగా పంపిణీ చేయడానికి. అప్పుడు, 'ని సెట్ చేయండి గరిష్ట వెడల్పు 'ఆస్తి విలువ' 100% ” చిత్రాలు వాటి అసలు వెడల్పును మించకుండా చూసుకోవడానికి. ఏర్పరచు ' ఎత్తు 'ఆస్తి విలువ' దానంతట అదే కారక నిష్పత్తిని నిర్వహించడానికి. చివరగా, “ని సెట్ చేయడం ద్వారా చిత్రాల మధ్య అంతరాన్ని జోడించండి మార్జిన్ 'ఆస్తి విలువ' 10px ”: CSS ఫ్లెక్స్‌బాక్స్ ఉపయోగించి అనుకూల చిత్రాలు విజయవంతంగా సృష్టించబడ్డాయి. దిగువ అవుట్‌పుట్ వీక్షణ బ్రౌజర్ విండో ర్యాప్‌కు ముందు ఉంటుంది: ఇప్పుడు, చిత్రం అనుకూలమైనది కాదా అని తనిఖీ చేయడానికి బ్రౌజర్ విండోను చుట్టుదాం: CSS ఫ్లెక్స్‌బాక్స్‌తో అనుకూల చిత్రాలను రూపొందించడానికి, వినియోగదారు ముందుగా HTML నిర్మాణాన్ని సృష్టించాలి, ఆపై, నిర్వచించండి ట్యాగ్.
లోపల “ని జోడించండి src చిత్ర మార్గాన్ని పేర్కొనడానికి మరియు ప్రత్యామ్నాయ చిత్రాన్ని జోడించడానికి ' ట్యాగ్ చేయండి ' ప్రతిదీ ”ట్యాగ్:
< div తరగతి = 'చిత్రాలు-కంటెయినర్' >
< img src = 'చిత్రం-1.jpg' ప్రతిదీ = 'మొదటి చిత్రం' >
< img src = 'image-2.jpg' ప్రతిదీ = 'రెండవ చిత్రం' >
div >
CSSని వర్తింపజేయండి
ప్రదర్శన: ఫ్లెక్స్ ;
flex-wrap: చుట్టు;
}
.images-container img {
ఫ్లెక్స్: 1 ;
గరిష్ట వెడల్పు: 100 % ;
ఎత్తు: ఆటో;
మార్జిన్: 10px;
}
ర్యాప్ ముందు 
చుట్టిన తర్వాత 
జోడించిన చిత్రాలు అనుకూలమైనవి అని పై చిత్రం నిర్ధారిస్తుంది. ముగింపు
ట్యాగ్. ఆపై, CSSని వర్తింపజేయండి మరియు CSS లోపల “డిస్‌ప్లే” ప్రాపర్టీని “కి సెట్ చేయండి ఫ్లెక్స్ ”ఫ్లెక్స్‌బాక్స్‌ని సృష్టించడానికి. CSS ఫ్లెక్స్‌బాక్స్‌తో అనుకూల చిత్రాలను రూపొందించడానికి ఈ వ్రాత-అప్ సమగ్ర మార్గదర్శినిని ప్రదర్శించింది.