Mukautuvat kuvat tai responsiiviset kuvat ovat yhdistelmä menetelmiä, joilla ladataan oikeat kuvat näytön koon tai laitteen mukaan. Mukautuvat kuvat säätyvät automaattisesti eri näyttökokojen ja laitteiden mukaan. Mukautuvat kuvat edellyttävät erilaisen asettelun luomista jokaiselle laitteelle, jolla verkkosivua käytetään. Mukautuvat kuvat voidaan luoda helposti CSS Flexboxilla. Flexbox on yksiulotteinen CSS-asettelumalli, joka luo joko rivejä tai sarakkeita. Flexbox helpottaa reagoivan rakenteen luomista.
Tämä viesti antaa ohjeita mukautuvien kuvien luomiseen CSS Flexboxilla.
Kuinka luoda mukautuvia kuvia CSS Flexboxilla?
Luodakseen mukautuvia kuvia CSS Flexboxin avulla käyttäjien on ensin luotava HTML-rakenne ja käytettävä sitten CSS:ää. Käytännön esittelyä varten käy läpi alla olevat menettelyt.
Luo HTML-rakenne
Luo Luo ensin Flexbox asettamalla ' näyttö ' omaisuuden arvo ' flex ' sisällä ' kuvasäiliö ” Käytä seuraavaksi kuviin CSS:ää määrittämällä ' img ' kanssa ' .images-container ”nimi. Aseta ensin ' flex ' omaisuuden arvo ' 1 ', jotta käytettävissä oleva vapaa tila jakautuisi tasaisesti kuvien kesken. Aseta sitten ' max-leveys ' omaisuuden arvo ' 100 % ' varmistaaksesi, että kuvat eivät ylitä niiden alkuperäistä leveyttä. Aseta ' korkeus ' omaisuuden arvo ' auto ”, jotta kuvasuhde säilyy. Lisää lopuksi kuvien välit asettamalla ' marginaali ' omaisuuden arvo ' 10px ”: Mukautuvat kuvat CSS Flexboxilla on luotu onnistuneesti. Alla oleva tulosnäkymä on ennen selainikkunan rivitystä: Kääritään nyt selainikkuna tarkistaaksesi, onko kuva mukautuva, ei ole: Luodakseen mukautuvia kuvia CSS Flexboxilla käyttäjän on ensin luotava HTML-rakenne ja määritettävä sitten tag. Lisää
-kohtaan ' src ' -tunniste määrittääksesi kuvan polun ja lisäämällä vaihtoehtoisen kuvan käyttämällä ' kaikki 'tunniste:
< div luokkaa = 'kuvasäilö' >
< img src = 'kuva-1.jpg' kaikki = 'Ensimmäinen kuva' >
< img src = 'kuva-2.jpg' kaikki = 'Toinen kuva' >
div >
Käytä CSS:ää
näyttö: flex ;
flex-wrap: kääri;
}
.images-container img {
flex: 1 ;
suurin leveys: 100 % ;
korkeus: auto;
marginaali: 10px;
}
Ennen käärettä 
Wrapin jälkeen 
Yllä oleva kuva vahvistaa, että lisätyt kuvat ovat mukautuvia. Johtopäätös
tag. Käytä sitten CSS:ää ja aseta CSS:n sisällä 'näyttö'-ominaisuuden arvoksi ' flex ' Flexboxin luomiseksi. Tämä kirjoitus on osoittanut kattavan oppaan mukautuvien kuvien luomiseen CSS Flexboxilla.