Ang mga adaptive na larawan o tumutugon na larawan ay isang kumbinasyon ng mga paraan upang i-load ang mga tamang larawan batay sa laki ng screen o device. Awtomatikong naaayos ang mga adaptive na larawan ayon sa iba't ibang laki ng screen at device. Ang mga adaptive na larawan ay nangangailangan ng paglikha ng ibang layout para sa bawat device kung saan maa-access ang web page. Madaling magawa ang mga adaptive na larawan gamit ang CSS Flexbox. Ang Flexbox ay isang layout ng CSS na one-dimensional na modelo na lumilikha ng alinman sa mga row o column. Pinapadali ng Flexbox ang paggawa ng tumutugon na istraktura.
Ang post na ito ay magbibigay ng gabay upang lumikha ng mga adaptive na larawan gamit ang CSS Flexbox.
Paano Gumawa ng Mga Adaptive na Larawan gamit ang CSS Flexbox?
Upang makagawa ng mga adaptive na larawan gamit ang CSS Flexbox, kailangan muna ng mga user na gumawa ng HTML structure at pagkatapos ay ilapat ang CSS. Para sa isang praktikal na pagpapakita, dumaan sa mga pamamaraang ibinigay sa ibaba.
Lumikha ng HTML Structure
Gumawa ng Una, lumikha ng isang Flexbox sa pamamagitan ng pagtatakda ng ' display 'halaga ng ari-arian sa ' baluktot ' sa loob ng ' lalagyan ng imahe ” Susunod, ilapat ang CSS sa mga larawan sa pamamagitan ng pagtukoy sa “ img 'kasama ang' .images-container ” pangalan. Una, itakda ang ' baluktot 'halaga ng ari-arian sa ' 1 ” para pantay na maipamahagi ang magagamit na libreng espasyo sa mga larawan. Pagkatapos, itakda ang ' max-width 'halaga ng ari-arian sa ' 100% ” upang matiyak na ang mga larawan ay hindi lalampas sa kanilang orihinal na lapad. Itakda ang ' taas 'halaga ng ari-arian sa ' sasakyan ” para mapanatili ang aspect ratio. Panghuli, magdagdag ng espasyo sa pagitan ng mga larawan sa pamamagitan ng pagtatakda ng “ margin 'halaga ng ari-arian sa ' 10px ”: Ang mga adaptive na imahe gamit ang CSS Flexbox ay matagumpay na nalikha. Ang view sa ibaba ng output ay bago ang pambalot ng window ng browser: Ngayon, balutin natin ang window ng browser upang suriin kung ang imahe ay adaptive ay hindi: Upang lumikha ng mga adaptive na larawan gamit ang CSS Flexbox, kailangan munang likhain ng user ang HTML structure, pagkatapos, tukuyin ang tag. Sa loob ng
idagdag ang “ src ” tag upang tukuyin ang path ng larawan at idagdag ang alternatibong larawan gamit ang “ lahat 'tag:
< div klase = 'lalagyan ng mga imahe' >
< img src = 'image-1.jpg' lahat = 'Unang Larawan' >
< img src = 'image-2.jpg' lahat = 'Ikalawang Larawan' >
div >
Ilapat ang CSS
display: baluktot ;
flex-wrap: balutin;
}
.images-container img {
ibaluktot: 1 ;
max-width: 100 % ;
taas: auto;
margin: 10px;
}
Bago Balutin 
Pagkatapos Balutin 
Kinukumpirma ng larawan sa itaas na ang mga imaheng idinagdag ay adaptive. Konklusyon
tag. Pagkatapos, ilapat ang CSS, at sa loob ng CSS itakda ang “display” property sa “ baluktot ” upang makagawa ng Flexbox. Ang write-up na ito ay nagpakita ng komprehensibong gabay sa paglikha ng mga adaptive na larawan gamit ang CSS Flexbox.